updates

apps/dashboard/shared/components/ui/avatar.tsx

@@ -1,10 +1,21 @@
 "use client"
 
+import Image from "next/image"
 import * as React from "react"
 import { Avatar as AvatarPrimitive } from "radix-ui"
 
 import { cn } from "@/shared/lib/utils"
 
+type AvatarImageStatus = "idle" | "loading" | "loaded" | "error"
+
+type AvatarImageStatusContextValue = {
+  status: AvatarImageStatus
+  setStatus: React.Dispatch<React.SetStateAction<AvatarImageStatus>>
+}
+
+const AvatarImageStatusContext =
+  React.createContext<AvatarImageStatusContextValue | null>(null)
+
 function Avatar({
   className,
   size = "default",
@@ -12,30 +23,59 @@ function Avatar({
 }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
   size?: "default" | "sm" | "lg"
 }) {
+  const [status, setStatus] = React.useState<AvatarImageStatus>("idle")
+
   return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={cn(
-        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
-        className
-      )}
-      {...props}
-    />
+    <AvatarImageStatusContext.Provider value={{ status, setStatus }}>
+      <AvatarPrimitive.Root
+        data-slot="avatar"
+        data-size={size}
+        className={cn(
+          "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+          className
+        )}
+        {...props}
+      />
+    </AvatarImageStatusContext.Provider>
   )
 }
 
 function AvatarImage({
   className,
+  sizes = "100%",
+  onLoadingStatusChange,
+  onLoad,
+  onError,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+}: Omit<React.ComponentPropsWithoutRef<typeof Image>, "fill"> &
+  Pick<React.ComponentProps<typeof AvatarPrimitive.Image>, "onLoadingStatusChange">) {
+  const imageStatusContext = React.useContext(AvatarImageStatusContext)
+  const { setStatus } = imageStatusContext ?? {}
+
+  React.useEffect(() => {
+    setStatus?.("loading")
+    onLoadingStatusChange?.("loading")
+  }, [onLoadingStatusChange, setStatus])
+
   return (
-    <AvatarPrimitive.Image
+    <Image
       data-slot="avatar-image"
+      fill
+      sizes={sizes}
       className={cn(
         "aspect-square size-full rounded-full object-cover",
         className
       )}
+      onLoad={(event) => {
+        setStatus?.("loaded")
+        onLoadingStatusChange?.("loaded")
+        onLoad?.(event)
+      }}
+      onError={(event) => {
+        setStatus?.("error")
+        onLoadingStatusChange?.("error")
+        onError?.(event)
+      }}
       {...props}
     />
   )
@@ -45,6 +85,12 @@ function AvatarFallback({
   className,
   ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  const imageStatusContext = React.useContext(AvatarImageStatusContext)
+
+  if (imageStatusContext?.status === "loaded") {
+    return null
+  }
+
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"

apps/dashboard/shared/components/ui/combobox.tsx

@@ -112,7 +112,7 @@ function ComboboxContent({
         <ComboboxPrimitive.Popup
           data-slot="combobox-content"
           data-chips={!!anchor}
-          className={cn("group/combobox-content relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn("group/combobox-content relative z-50 flex flex-col max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
           {...props}
         />
       </ComboboxPrimitive.Positioner>
@@ -125,7 +125,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
     <ComboboxPrimitive.List
       data-slot="combobox-list"
       className={cn(
-        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        "min-h-0 flex-1 scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
         className
       )}
       {...props}