@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/components/organization/OrganizationHeader.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from "react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useLocation } from "wouter"
+import { useOrganization } from "@/hooks/use-organization"
+
+interface OrganizationHeaderProps {
+  organization: PublicOrgSchema
+  isCurrentUserOrganization?: boolean
+  className?: string
+  showActions?: boolean
+}
+
+export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
+  organization,
+  className,
+  showActions = true,
+}) => {
+  const session = useGlobalStore((s) => s.session)
+  const [, navigate] = useLocation()
+  const canManageOrg =
+    organization.user_permissions?.can_manage_org ||
+    organization.owner_account_id === session?.account_id
+
+  const { membersCount, packagesCount, isLoading } = useOrganization({
+    orgId: organization.org_id,
+    orgName: organization.name!,
+  })
+
+  const handleSettingsClick = () => {
+    navigate(`/${organization.name}/settings`)
+  }
+  return (
+    <div className={cn("bg-white border-b border-gray-200", className)}>
+      <div className="container mx-auto px-6 py-6">
+        {/* Mobile Layout */}
+        <div className="block sm:hidden">
+          <div className="flex flex-col items-center text-center space-y-4">
+            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24">
+              <AvatarImage
+                src={`https://github.com/${organization.name}.png`}
+                alt={`${organization.name} avatar`}
+                className="object-cover"
+              />
+              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
+                {(organization.name || "")
+                  .split(" ")
+                  .map((word) => word[0])
+                  .join("")
+                  .toUpperCase()
+                  .slice(0, 2)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div>
+              <div className="flex flex-col items-center gap-3 mb-3">
+                <h1 className="font-bold text-gray-900 text-xl">
+                  {organization.name}
+                </h1>
+                {canManageOrg && showActions && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSettingsClick}
+                  >
+                    <Settings className="mr-2 h-4 w-4" />
+                    Settings
+                  </Button>
+                )}
+              </div>
+
+              <div className="grid grid-cols-2 md:flex flex-wrap justify-center gap-4 text-sm">
+                <div className="flex items-center gap-1.5 text-gray-600">
+                  <Users className="h-3.5 w-3.5" />
+                  <span className="font-medium">
+                    {isLoading ? "..." : membersCount}
+                  </span>
+                  <span>members</span>
+                </div>
+                <div className="flex items-center gap-1.5 text-gray-600">
+                  <Package className="h-3.5 w-3.5" />
+                  <span className="font-medium">
+                    {isLoading ? "..." : packagesCount}
+                  </span>
+                  <span>packages</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Desktop Layout */}
+        <div className="hidden sm:block">
+          <div className="flex items-center gap-6">
+            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24 flex-shrink-0">
+              <AvatarImage
+                src={`https://github.com/${organization.name}.png`}
+                alt={`${organization.name} avatar`}
+                className="object-cover"
+              />
+              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
+                {(organization.name || "")
+                  .split(" ")
+                  .map((word) => word[0])
+                  .join("")
+                  .toUpperCase()
+                  .slice(0, 2)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between mb-3">
+                <h1 className="font-bold text-gray-900 text-2xl md:text-3xl truncate">
+                  {organization.name}
+                </h1>
+                {canManageOrg && showActions && (
+                  <Button variant="outline" onClick={handleSettingsClick}>
+                    <Settings className="mr-2 h-4 w-4" />
+                    Settings
+                  </Button>
+                )}
+              </div>
+
+              <div className="flex flex-wrap items-center gap-6 text-sm text-gray-600">
+                <div className="flex items-center gap-2">
+                  <Users className="h-4 w-4" />
+                  <span className="font-medium text-gray-900">
+                    {isLoading ? "..." : membersCount}
+                  </span>
+                  <span>members</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Package className="h-4 w-4" />
+                  <span className="font-medium text-gray-900">
+                    {isLoading ? "..." : packagesCount}
+                  </span>
+                  <span>packages</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Building2 className="h-4 w-4" />
+                  <span>Organization</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/organization/OrganizationMembers.tsx

@@ -0,0 +1,146 @@
+import React from "react"
+import { Link } from "wouter"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Users, Crown, Shield, User, Loader2 } from "lucide-react"
+import { timeAgo } from "@/lib/utils/timeAgo"
+import { cn } from "@/lib/utils"
+import { Account } from "fake-snippets-api/lib/db/schema"
+import { useListOrgMembers } from "@/hooks/use-list-org-members"
+
+interface OrganizationMembersProps {
+  orgId: string
+  className?: string
+}
+type MemberRole = "owner" | "admin" | "member" //todo
+const getRoleIcon = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return <Crown className="h-3 w-3" />
+    case "admin":
+      return <Shield className="h-3 w-3" />
+    case "member":
+      return <User className="h-3 w-3" />
+    default:
+      return <User className="h-3 w-3" />
+  }
+}
+
+const getRoleColor = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return "bg-yellow-100 text-yellow-800 border-yellow-200"
+    case "admin":
+      return "bg-purple-100 text-purple-800 border-purple-200"
+    case "member":
+      return "bg-gray-100 text-gray-800 border-gray-200"
+    default:
+      return "bg-gray-100 text-gray-800 border-gray-200"
+  }
+}
+
+export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
+  orgId,
+  className,
+}) => {
+  const { data: members = [], isLoading } = useListOrgMembers({ orgId })
+
+  if (isLoading) {
+    return (
+      <div
+        className={cn(
+          "bg-white rounded-lg border border-gray-200 p-4 sm:p-6",
+          className,
+        )}
+      >
+        <div className="mb-4">
+          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+            Members
+          </h2>
+        </div>
+        <div className="text-center py-20 text-gray-500 grid place-items-center">
+          <Loader2 className="w-8 h-8 text-blue-600 dark:text-blue-400 animate-spin" />
+          <p className="mt-2 text-sm select-none">Loading members...</p>
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div
+      className={cn(
+        "bg-white rounded-lg border border-gray-200 p-4 py-20 sm:p-6",
+        className,
+      )}
+    >
+      <div className="mb-4">
+        <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+          Members ({members.length})
+        </h2>
+      </div>
+
+      <div className="space-y-2 sm:space-y-3">
+        {members.map((member) => (
+          <Link
+            key={member.account_id || member.github_username}
+            href={`/${member.github_username}`}
+            className="block"
+          >
+            <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
+              <div className="flex items-center gap-3 min-w-0 flex-1">
+                <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">
+                  <AvatarImage
+                    src={`https://github.com/${member.github_username}.png`}
+                    alt={`${member.github_username} avatar`}
+                  />
+                  <AvatarFallback className="text-sm font-medium">
+                    {member.github_username
+                      .split(" ")
+                      .map((word) => word[0])
+                      .join("")
+                      .toUpperCase()
+                      .slice(0, 2)}
+                  </AvatarFallback>
+                </Avatar>
+
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-medium text-gray-900 truncate">
+                      {member.github_username}
+                    </h3>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        "text-xs flex items-center gap-1 flex-shrink-0",
+                        getRoleColor("admin"),
+                      )}
+                    >
+                      {getRoleIcon("admin")}
+                      {"admin"}
+                    </Badge>
+                  </div>
+                  <p className="text-sm text-gray-500 truncate">
+                    @{member.github_username}
+                  </p>
+                </div>
+              </div>
+
+              <div className="text-right flex-shrink-0 hidden sm:block">
+                <p className="text-xs text-gray-500">
+                  Joined {timeAgo(new Date())}
+                </p>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {members.length === 0 && (
+        <div className="text-center py-6 sm:py-8 text-gray-500">
+          <Users className="h-10 w-10 sm:h-12 sm:w-12 mx-auto mb-3 text-gray-300" />
+          <p className="text-sm sm:text-base">No members found</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/package-port/CodeAndPreview.tsx

@@ -1,5 +1,4 @@
 import { CodeEditor } from "@/components/package-port/CodeEditor"
-import { usePackageVisibilitySettingsDialog } from "@/components/dialogs/package-visibility-settings-dialog"
 import { useConfirmDiscardChangesDialog } from "@/components/dialogs/confirm-discard-changes-dialog"
 import { useToast } from "@/hooks/use-toast"
 import { useUrlParams } from "@/hooks/use-url-params"
@@ -7,7 +6,6 @@ import useWarnUserOnPageChange from "@/hooks/use-warn-user-on-page-change"
 import { getSnippetTemplate } from "@/lib/get-snippet-template"
 import { cn } from "@/lib/utils"
 import type { Package } from "fake-snippets-api/lib/db/schema"
-import { Loader2 } from "lucide-react"
 import { useMemo, useState } from "react"
 import EditorNav from "@/components/package-port/EditorNav"
 import { SuspenseRunFrame } from "../SuspenseRunFrame"
@@ -15,8 +13,8 @@ import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
 import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
 import { useFileManagement } from "@/hooks/useFileManagement"
-import { DEFAULT_CODE } from "@/lib/utils/package-utils"
-import { useGlobalStore } from "@/hooks/use-global-store"
+import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
+import { useNewPackageSavePromptDialog } from "../dialogs/new-package-save-prompt-dialog"
 
 interface Props {
   pkg?: Package
@@ -39,13 +37,13 @@ export interface CodeAndPreviewState {
 
 export function CodeAndPreview({ pkg, projectUrl }: Props) {
   const { toast } = useToast()
-  const session = useGlobalStore((s) => s.session)
   const urlParams = useUrlParams()
 
   const templateFromUrl = useMemo(
     () => (urlParams.template ? getSnippetTemplate(urlParams.template) : null),
     [urlParams.template],
   )
+
   const [state, setState] = useState<CodeAndPreviewState>({
     showPreview: true,
     fullScreen: false,
@@ -59,7 +57,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     pkg?.snippet_type ?? templateFromUrl?.type ?? urlParams.snippet_type
 
   const { Dialog: NewPackageSaveDialog, openDialog: openNewPackageSaveDialog } =
-    usePackageVisibilitySettingsDialog()
+    useNewPackageSavePromptDialog()
 
   const { Dialog: DiscardChangesDialog, openDialog: openDiscardChangesDialog } =
     useConfirmDiscardChangesDialog()
@@ -69,20 +67,26 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     isSaving,
     currentFile,
     fsMap,
+    priorityFileFetched,
     isLoading,
     createFile,
+    mainComponentPath,
     deleteFile,
+    isFullyLoaded,
     onFileSelect,
+    totalFilesCount,
     saveFiles,
     setLocalFiles,
+    loadedFilesCount,
     localFiles,
+    currentFileCode,
     initialFiles,
     renameFile,
     packageFilesMeta,
   } = useFileManagement({
     templateCode: templateFromUrl?.code,
     currentPackage: pkg,
-    fileChoosen: urlParams.file_path ?? null,
+    urlParams,
     openNewPackageSaveDialog,
     updateLastUpdated: () => {
       setState((prev) => ({ ...prev, lastSavedAt: Date.now() }))
@@ -94,6 +98,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
       (!isSaving &&
         Date.now() - state.lastSavedAt > 1000 &&
         localFiles.some((file) => {
+          if (isHiddenFile(file.path)) return false
           const initialFile = initialFiles.find((x) => x.path === file.path)
           return initialFile?.content !== file.content
         })) ||
@@ -101,31 +106,6 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     [localFiles, initialFiles, isSaving, state.lastSavedAt],
   )
 
-  useWarnUserOnPageChange({ hasUnsavedChanges })
-
-  const currentFileCode = useMemo(
-    () =>
-      localFiles.find((x) => x.path === currentFile)?.content ??
-      state.defaultComponentFile ??
-      DEFAULT_CODE,
-    [localFiles, currentFile],
-  )
-
-  const mainComponentPath = useMemo(() => {
-    const isReactComponentExported =
-      /export function\s+\w+/.test(currentFileCode) ||
-      /export const\s+\w+\s*=/.test(currentFileCode) ||
-      /export default\s+\w+/.test(currentFileCode) ||
-      /export default\s+function\s*(\w*)\s*\(/.test(currentFileCode) ||
-      /export default\s*\(\s*\)\s*=>/.test(currentFileCode)
-
-    return (currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts")) &&
-      !!localFiles.some((x) => x.path == currentFile) &&
-      isReactComponentExported
-      ? currentFile
-      : state.defaultComponentFile
-  }, [currentFile, localFiles, currentFileCode])
-
   const handleEditEvent = (event: ManualEditEvent) => {
     const parsedManualEdits = JSON.parse(
       localFiles.find((x) => x.path === "manual-edits.json")?.content || "{}",
@@ -171,19 +151,13 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     })
   }
 
-  if (urlParams.package_id && (!pkg || isLoading)) {
-    return (
-      <div className="flex items-center justify-center h-[80vh]">
-        <div className="flex flex-col items-center justify-center">
-          <div className="text-lg text-gray-500 mb-4">Loading</div>
-          <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
-        </div>
-      </div>
-    )
-  }
+  useWarnUserOnPageChange({
+    hasUnsavedChanges: Boolean(hasUnsavedChanges),
+    isPackageThere: Boolean(pkg),
+  })
 
   return (
-    <div className="flex flex-col min-h-[50vh]">
+    <div className="flex flex-col h-full">
       <EditorNav
         circuitJson={state.circuitJson}
         pkg={pkg}
@@ -202,7 +176,9 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
         packageFilesMeta={packageFilesMeta}
       />
       <div
-        className={`flex ${state.showPreview ? "flex-col md:flex-row" : ""}`}
+        className={`flex flex-1 min-h-0 ${
+          state.showPreview ? "flex-col md:flex-row" : ""
+        }`}
       >
         <div
           className={cn(
@@ -213,8 +189,14 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
           <CodeEditor
             isSaving={isSaving}
             handleCreateFile={createFile}
+            totalFilesCount={totalFilesCount}
+            loadedFilesCount={loadedFilesCount}
+            isFullyLoaded={isFullyLoaded}
             handleDeleteFile={deleteFile}
             handleRenameFile={renameFile}
+            isPriorityFileFetched={
+              !priorityFileFetched && Boolean(urlParams.package_id)
+            }
             pkg={pkg}
             currentFile={currentFile}
             onFileSelect={onFileSelect}
@@ -234,7 +216,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
         </div>
         <div
           className={cn(
-            "flex p-0 flex-col min-h-[640px] overflow-y-hidden",
+            "flex p-0 flex-col overflow-y-hidden",
             state.fullScreen
               ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
               : "w-full md:w-1/2",
@@ -242,8 +224,10 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
           )}
         >
           <SuspenseRunFrame
+            showFileMenu={false}
             showRunButton
             forceLatestEvalVersion
+            isLoadingFiles={isLoading}
             onRenderStarted={() =>
               setState((prev) => ({ ...prev, lastRunCode: currentFileCode }))
             }
@@ -255,7 +239,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
             onEditEvent={(event) => {
               handleEditEvent(event)
             }}
-            fsMap={fsMap ?? {}}
+            fsMap={fsMap}
             projectUrl={projectUrl}
           />
         </div>
@@ -265,3 +249,5 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     </div>
   )
 }
+
+export default CodeAndPreview

package/src/components/package-port/CodeEditor.tsx

@@ -23,7 +23,7 @@ import {
   createSystem,
   createVirtualTypeScriptEnvironment,
 } from "@typescript/vfs"
-import { loadDefaultLibMap } from "@/lib/ts-lib-cache"
+import { loadDefaultLibMap, fetchWithPackageCaching } from "@/lib/ts-lib-cache"
 import { tsAutocomplete, tsFacet, tsSync } from "@valtown/codemirror-ts"
 import { getLints } from "@valtown/codemirror-ts"
 import { EditorView } from "codemirror"
@@ -50,6 +50,7 @@ import {
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
 import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
+import { Loader2 } from "lucide-react"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -59,6 +60,7 @@ import type { CommonLayoutProps } from "@tscircuit/props"
 
 export const CodeEditor = ({
   onCodeChange,
+  isPriorityFileFetched,
   readOnly = false,
   files = [],
   isSaving = false,
@@ -72,9 +74,13 @@ export const CodeEditor = ({
   handleCreateFile,
   handleDeleteFile,
   pkg,
+  isFullyLoaded = false,
+  totalFilesCount = 0,
+  loadedFilesCount = 0,
 }: {
   onCodeChange: (code: string, filename?: string) => void
   files: PackageFile[]
+  isPriorityFileFetched: boolean
   isSaving?: boolean
   handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
   handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
@@ -87,6 +93,9 @@ export const CodeEditor = ({
   onFileContentChanged?: (path: string, content: string) => void
   currentFile: string | null
   onFileSelect: (path: string, lineNumber?: number) => void
+  isFullyLoaded?: boolean
+  totalFilesCount?: number
+  loadedFilesCount?: number
 }) => {
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
@@ -112,7 +121,7 @@ export const CodeEditor = ({
     useViewTsFilesDialog()
 
   const entryPointFileName = useMemo(() => {
-    const entryPointFile = findTargetFile(files, null)
+    const entryPointFile = findTargetFile({ files, filePathFromUrl: null })
     if (entryPointFile?.path) return entryPointFile.path
     return files.find((x) => x.path === "index.tsx")?.path || "index.tsx"
   }, [files])
@@ -120,11 +129,14 @@ export const CodeEditor = ({
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const [isCreatingFile, setIsCreatingFile] = useState(false)
 
-  // Set current file on component mount
+  // Set current file on component mount - only when explicitly requested via URL
   useEffect(() => {
     if (files.length === 0 || !pkgFilesLoaded || currentFile) return
 
-    const targetFile = findTargetFile(files, filePathFromUrl)
+    // Only run this if there's an explicit file_path in URL - don't auto-select files
+    if (!filePathFromUrl) return
+
+    const targetFile = findTargetFile({ files, filePathFromUrl })
     if (targetFile) {
       const lineNumber = lineNumberFromUrl
         ? parseInt(lineNumberFromUrl, 10)
@@ -207,33 +219,7 @@ export const CodeEditor = ({
       projectName: "my-project",
       typescript: tsModule,
       logger: console,
-      fetcher: (async (input: RequestInfo | URL, init?: RequestInit) => {
-        const registryPrefixes = [
-          "https://data.jsdelivr.com/v1/package/resolve/npm/@tsci/",
-          "https://data.jsdelivr.com/v1/package/npm/@tsci/",
-          "https://cdn.jsdelivr.net/npm/@tsci/",
-        ]
-        if (
-          typeof input === "string" &&
-          registryPrefixes.some((prefix) => input.startsWith(prefix))
-        ) {
-          const fullPackageName = input
-            .replace(registryPrefixes[0], "")
-            .replace(registryPrefixes[1], "")
-            .replace(registryPrefixes[2], "")
-          const packageName = fullPackageName.split("/")[0].replace(/\./, "/")
-          const pathInPackage = fullPackageName.split("/").slice(1).join("/")
-          const jsdelivrPath = `${packageName}${
-            pathInPackage ? `/${pathInPackage}` : ""
-          }`
-          return fetch(
-            `${apiUrl}/snippets/download?jsdelivr_resolve=${input.includes(
-              "/resolve/",
-            )}&jsdelivr_path=${encodeURIComponent(jsdelivrPath)}`,
-          )
-        }
-        return fetch(input, init)
-      }) as typeof fetch,
+      fetcher: fetchWithPackageCaching as typeof fetch,
       delegate: {
         started: () => {
           const manualEditsTypeDeclaration = `
@@ -825,10 +811,15 @@ export const CodeEditor = ({
         isCreatingFile={isCreatingFile}
         setIsCreatingFile={setIsCreatingFile}
         pkg={pkg}
+        isLoadingFiles={!isFullyLoaded}
+        loadingProgress={
+          totalFilesCount > 0 ? `${loadedFilesCount}/${totalFilesCount}` : null
+        }
       />
       <div className="flex flex-col flex-1 w-full min-w-0 h-full">
         {showImportAndFormatButtons && (
           <CodeEditorHeader
+            isLoadingFiles={!isFullyLoaded}
             entrypointFileName={entryPointFileName}
             appendNewFile={(path: string, content: string) => {
               onFileContentChanged?.(path, content)
@@ -854,7 +845,13 @@ export const CodeEditor = ({
           className={
             "flex-1 overflow-auto [&_.cm-editor]:h-full [&_.cm-scroller]:!h-full"
           }
+          style={{ display: isPriorityFileFetched ? "none" : "block" }}
         />
+        {isPriorityFileFetched && (
+          <div className="grid place-items-center h-full">
+            <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
+          </div>
+        )}
       </div>
       {showQuickOpen && (
         <QuickOpen