feat: directory loading & error states

Author: ben-fornefeld

src/features/dashboard/sandbox/inspect/dir.tsx

@@ -1,9 +1,9 @@
 import { FilesystemNode } from './filesystem/types'
+import type { CSSProperties } from 'react'
 import { ChevronRight } from 'lucide-react'
 import SandboxInspectNode from './node'
 import { useDirectory } from './hooks/use-directory'
 import { cn } from '@/lib/utils'
-import { Loader } from '@/ui/loader'
 import { DataTableRow } from '@/ui/data-table'
 import { motion } from 'motion/react'
 import { FileType } from 'e2b'
@@ -15,40 +15,59 @@ interface SandboxInspectDirProps {
 }
 
 export default function SandboxInspectDir({ dir }: SandboxInspectDirProps) {
-  const { isExpanded, toggle, isLoading, hasChildren, children } = useDirectory(
-    dir.path
-  )
+  const {
+    hasError,
+    error,
+    isExpanded,
+    toggle,
+    isLoading,
+    isLoaded,
+    hasChildren,
+    children,
+  } = useDirectory(dir.path)
 
   return (
     <>
       <DataTableRow
         role="button"
         tabIndex={0}
-        onClick={() => toggle()}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            toggle()
-          }
-        }}
+        onClick={toggle}
         className={cn(
-          'hover:bg-bg-200 cursor-pointer gap-1 py-1 transition-none select-none',
-          {
-            'animate-pulse': isLoading,
-          }
+          'hover:bg-bg-200 cursor-pointer gap-1 truncate py-1 transition-none select-none'
         )}
       >
         <motion.span
           animate={{
-            rotate: isExpanded ? 90 : 0,
+            rotate: isExpanded && isLoaded ? 90 : 0,
+            color:
+              isExpanded && isLoaded
+                ? 'var(--color-fg)'
+                : 'var(--color-fg-500)',
           }}
         >
-          <ChevronRight className="text-fg-300 size-4" />
+          <ChevronRight className="size-4" />
         </motion.span>
-        <span className="text-left font-sans">{dir.name}</span>
-        {isLoading && <Loader className="ml-2" />}
+        <span
+          style={{ '--shiny-width': '100px' } as CSSProperties}
+          className={cn('truncate text-left font-sans', {
+            // Shine effect
+            'text-fg-500 animate-shiny-text [background-size:var(--shiny-width)_100%] bg-clip-text [background-position:0_0] bg-no-repeat duration-1000 [transition:background-position_1s_ease-in-out]':
+              isLoading,
+            // Shine gradient
+            'bg-gradient-to-r from-transparent via-[var(--color-fg)] via-50% to-transparent':
+              isLoading,
+          })}
+        >
+          {dir.name}
+        </span>
+        {hasError && (
+          <span className="text-error truncate text-sm text-ellipsis">
+            {error}
+          </span>
+        )}
       </DataTableRow>
 
-      {isExpanded && (
+      {isExpanded && hasChildren && (
         <div className="flex flex-col pl-2">
           {children.map((child) => (
             <SandboxInspectNode key={child.path} path={child.path} />

src/styles/theme.css

@@ -154,12 +154,25 @@
     }
   }
 
+  @keyframes shiny-text {
+    0%,
+    90%,
+    100% {
+      background-position: calc(-100% - var(--shiny-width)) 0;
+    }
+    30%,
+    60% {
+      background-position: calc(100% + var(--shiny-width)) 0;
+    }
+  }
+
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
   --animate-shimmer: shimmer 1s ease-in-out infinite;
   --animate-grid: grid 30s linear infinite;
   --animate-wave: wave 2s linear linear infinite;
   --animate-fade-slide-in: fade-slide-in-from-bottom 0.1s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-shiny-text: shiny-text 0.8s infinite;
 }
 
 @utility container {