@tscircuit/fake-snippets 0.0.107 → 0.0.109

package/src/components/ViewPackagePage/components/main-content-header.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
@@ -72,7 +70,9 @@ export default function MainContentHeader({
     }
   }
 
-  const { circuitJson } = useCurrentPackageCircuitJson()
+  const hasCircuitJson = packageFiles.some(
+    (file) => file.file_path === "dist/circuit.json",
+  )
 
   return (
     <div className="flex items-center justify-between mb-4">
@@ -86,7 +86,7 @@ export default function MainContentHeader({
           unscopedName={packageInfo?.unscoped_name}
           desiredImageType={activeView}
           author={packageInfo?.owner_github_username ?? undefined}
-          circuitJson={circuitJson}
+          hasCircuitJson={hasCircuitJson}
         />
 
         {/* Code Dropdown */}

package/src/components/ViewPackagePage/components/main-content-view-selector.tsx

@@ -1,4 +1,3 @@
-"use client"
 import React from "react"
 import {
   Code,

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -1,4 +1,3 @@
-"use client"
 import { GitFork, Star, Tag, Settings, LinkIcon } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -112,7 +111,7 @@ const MobileSidebar = ({
           {localDescription ||
             packageInfo?.description ||
             packageInfo?.ai_description ||
-            "A Default 60 keyboard created with tscircuit"}
+            ""}
         </p>
         {isOwner && (
           <Button

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -12,10 +12,7 @@ import { Lock, Globe } from "lucide-react"
 import { GitFork, Package, Star } from "lucide-react"
 
 import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
-import {
-  usePackageStarMutationByName,
-  usePackageStarsByName,
-} from "@/hooks/use-package-stars"
+import { usePackageStarMutationByName } from "@/hooks/use-package-stars"
 import { useOrderDialog } from "@tscircuit/runframe"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Package as PackageType } from "fake-snippets-api/lib/db/schema"
@@ -45,8 +42,7 @@ export default function PackageHeader({
     isLoggedIn,
     packageReleaseId: packageInfo?.latest_package_release_id ?? "",
   })
-  const { data: starData, isLoading: isStarDataLoading } =
-    usePackageStarsByName(packageInfo?.name ?? null)
+
   const { addStar, removeStar } = usePackageStarMutationByName(
     packageInfo?.name ?? "",
   )
@@ -57,7 +53,7 @@ export default function PackageHeader({
   const handleStarClick = async () => {
     if (!packageInfo?.name || !isLoggedIn) return
 
-    if (starData?.is_starred) {
+    if (packageInfo?.is_starred) {
       await removeStar.mutateAsync()
     } else {
       await addStar.mutateAsync()
@@ -69,8 +65,7 @@ export default function PackageHeader({
     await forkPackage(packageInfo.package_id)
   }
 
-  const isStarLoading =
-    isStarDataLoading || addStar.isLoading || removeStar.isLoading
+  const isStarLoading = addStar.isLoading || removeStar.isLoading
 
   useEffect(() => {
     window.TSCIRCUIT_REGISTRY_API_BASE_URL =
@@ -155,15 +150,15 @@ export default function PackageHeader({
                     >
                       <Star
                         className={`w-4 h-4 mr-2 ${
-                          starData?.is_starred
+                          packageInfo?.is_starred
                             ? "fill-yellow-500 text-yellow-500"
                             : ""
                         }`}
                       />
-                      {starData?.is_starred ? "Starred" : "Star"}
-                      {(starData?.star_count ?? 0) > 0 && (
+                      {packageInfo?.is_starred ? "Starred" : "Star"}
+                      {(packageInfo?.star_count ?? 0) > 0 && (
                         <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                          {starData?.star_count}
+                          {packageInfo?.star_count}
                         </span>
                       )}
                     </Button>
@@ -229,13 +224,15 @@ export default function PackageHeader({
             >
               <Star
                 className={`w-4 h-4 mr-2 ${
-                  starData?.is_starred ? "fill-yellow-500 text-yellow-500" : ""
+                  packageInfo?.is_starred
+                    ? "fill-yellow-500 text-yellow-500"
+                    : ""
                 }`}
               />
-              {starData?.is_starred ? "Starred" : "Star"}
-              {(starData?.star_count ?? 0) > 0 && (
+              {packageInfo?.is_starred ? "Starred" : "Star"}
+              {(packageInfo?.star_count ?? 0) > 0 && (
                 <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                  {starData?.star_count}
+                  {packageInfo?.star_count}
                 </span>
               )}
             </Button>

package/src/components/ViewPackagePage/components/preview-image-squares.tsx

@@ -1,4 +1,3 @@
-"use client"
 import { Skeleton } from "@/components/ui/skeleton"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import type { Package } from "fake-snippets-api/lib/db/schema"

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useState, useEffect, useMemo } from "react"
 import MainContentHeader from "./main-content-header"
 import Sidebar from "./sidebar"
@@ -21,20 +19,18 @@ import Footer from "@/components/Footer"
 import PackageHeader from "./package-header"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useLocation } from "wouter"
-import { Package } from "fake-snippets-api/lib/db/schema"
-import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
+import type {
+  Package,
+  PackageFile as ApiPackageFile,
+} from "fake-snippets-api/lib/db/schema"
 import { useRequestAiReviewMutation } from "@/hooks/use-request-ai-review-mutation"
 import { useAiReview } from "@/hooks/use-ai-review"
 import { useQueryClient } from "react-query"
 import SidebarReleasesSection from "./sidebar-releases-section"
 
-interface PackageFile {
-  package_file_id: string
-  package_release_id: string
-  file_path: string
-  file_content: string
-  content_text?: string // Keep for backward compatibility
-  created_at: string // iso-8601
+interface PackageFile extends ApiPackageFile {
+  file_content?: string
+  content_text?: string | null // Keep for backward compatibility
 }
 
 interface RepoPageContentProps {
@@ -44,10 +40,12 @@ interface RepoPageContentProps {
   packageRelease?: import("fake-snippets-api/lib/db/schema").PackageRelease
   onFileClicked?: (file: PackageFile) => void
   onEditClicked?: () => void
+  arePackageFilesFetched?: boolean
 }
 
 export default function RepoPageContent({
   packageFiles,
+  arePackageFilesFetched = false,
   packageInfo,
   packageRelease,
   onFileClicked,
@@ -70,8 +68,12 @@ export default function RepoPageContent({
     }
   }, [aiReview?.ai_review_text, queryClient])
   const session = useGlobalStore((s) => s.session)
-  const { circuitJson, isLoading: isCircuitJsonLoading } =
-    useCurrentPackageCircuitJson()
+
+  // Check if circuit.json exists without downloading it
+  const circuitJsonExists = useMemo(() => {
+    return packageFiles?.some((file) => file.file_path === "dist/circuit.json")
+  }, [packageFiles])
+
   const { mutate: requestAiReview, isLoading: isRequestingAiReview } =
     useRequestAiReviewMutation({
       onSuccess: (_packageRelease, aiReview) => {
@@ -91,13 +93,12 @@ export default function RepoPageContent({
 
   // Handle initial view selection and hash-based view changes
   useEffect(() => {
-    if (isCircuitJsonLoading) return
-    if (!packageInfo) return
+    if (!packageInfo || !arePackageFilesFetched) return
     const hash = window.location.hash.slice(1)
     const validViews = ["files", "3d", "pcb", "schematic", "bom"]
     const circuitDependentViews = ["3d", "pcb", "schematic", "bom"]
 
-    const availableViews = circuitJson
+    const availableViews = circuitJsonExists
       ? validViews
       : validViews.filter((view) => !circuitDependentViews.includes(view))
 
@@ -115,7 +116,7 @@ export default function RepoPageContent({
         window.location.hash = "files"
       }
     }
-  }, [packageInfo?.default_view, circuitJson, isCircuitJsonLoading])
+  }, [packageInfo?.default_view, circuitJsonExists])
 
   const importantFilePaths = packageFiles
     ?.filter((pf) => isPackageFileImportant(pf.file_path))
@@ -146,7 +147,7 @@ export default function RepoPageContent({
         return (
           <FilesView
             packageFiles={packageFiles}
-            isLoading={!packageFiles}
+            arePackageFilesFetched={arePackageFilesFetched}
             onFileClicked={onFileClicked}
           />
         )
@@ -162,7 +163,7 @@ export default function RepoPageContent({
         return (
           <FilesView
             packageFiles={packageFiles}
-            isLoading={!packageFiles}
+            arePackageFilesFetched={arePackageFilesFetched}
             onFileClicked={onFileClicked}
           />
         )
@@ -215,7 +216,7 @@ export default function RepoPageContent({
             {/* Important Files View - Always shown */}
             <ImportantFilesView
               importantFiles={importantFiles}
-              isLoading={!packageFiles}
+              isFetched={arePackageFilesFetched}
               onEditClicked={onEditClicked}
               packageAuthorOwner={packageInfo?.owner_github_username}
               aiDescription={packageInfo?.ai_description ?? ""}

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -1,5 +1,5 @@
 import { Badge } from "@/components/ui/badge"
-import { GitFork, Star, Settings, LinkIcon, Github } from "lucide-react"
+import { GitFork, Star, Settings, LinkIcon, Github, Plus } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageReleaseById } from "@/hooks/use-package-release"
@@ -164,7 +164,7 @@ export default function SidebarAboutSection({
             <GitFork className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
             <span>{(packageInfo as any)?.fork_count ?? "0"} forks</span>
           </div>
-          {packageInfo?.github_repo_full_name && (
+          {packageInfo?.github_repo_full_name ? (
             <a
               target="_blank"
               href={`https://github.com/${packageInfo.github_repo_full_name}`}
@@ -173,6 +173,22 @@ export default function SidebarAboutSection({
               <Github className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
               <span>{packageInfo?.github_repo_full_name.split("/")[1]}</span>
             </a>
+          ) : (
+            <>
+              {isOwner && (
+                <div
+                  className="flex items-center hover:underline hover:underline-offset-2 cursor-pointer hover:decoration-gray-500"
+                  onClick={openEditPackageDetailsDialog}
+                  title="Connect GitHub"
+                >
+                  <div className="relative mr-2">
+                    <Github className="h-4 w-4 text-gray-500 dark:text-[#8b949e]" />
+                    <Plus className="h-2 w-2 absolute -bottom-0.5 -right-0.5 text-gray-500 dark:text-[#8b949e] bg-white dark:bg-[#0d1117] rounded-full" />
+                  </div>
+                  <span>Connect GitHub</span>
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -110,7 +110,7 @@ export default function SidebarReleasesSection() {
         ))}
         {latestBuild && (
           <PrefetchPageLink
-            href={`/build/${latestBuild.package_build_id}`}
+            href={`/${packageInfo?.name}/releases`}
             className="flex items-center gap-2 text-sm text-gray-500 dark:text-[#8b949e]"
           >
             <StatusIcon status={status} />

package/src/components/ViewPackagePage/components/sidebar.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { Package } from "fake-snippets-api/lib/db/schema"
 import SidebarAboutSection from "./sidebar-about-section"
 import SidebarReleasesSection from "./sidebar-releases-section"

package/src/components/ViewPackagePage/components/tab-views/files-view.tsx

@@ -1,11 +1,10 @@
-"use client"
-
 import { Skeleton } from "@/components/ui/skeleton"
 import { FileText, Folder } from "lucide-react"
 import { useMemo, useState } from "react"
 import { isHiddenFile } from "../../utils/is-hidden-file"
 import { isWithinDirectory } from "../../utils/is-within-directory"
 import HiddenFilesDropdown from "@/components/HiddenFilesDropdown"
+import type { PackageFile as ApiPackageFile } from "fake-snippets-api/lib/db/schema"
 
 interface Directory {
   type: "directory"
@@ -21,24 +20,20 @@ interface File {
   created_at: string
 }
 
-interface PackageFile {
-  package_file_id: string
-  package_release_id: string
-  file_path: string
-  file_content: string
-  content_text?: string // Keep for backward compatibility
-  created_at: string // iso-8601
+interface PackageFile extends ApiPackageFile {
+  file_content?: string
+  content_text?: string | null // Keep for backward compatibility
 }
 
 interface FilesViewProps {
   packageFiles?: PackageFile[]
-  isLoading?: boolean
   onFileClicked?: (file: PackageFile) => void
+  arePackageFilesFetched?: boolean
 }
 
 export default function FilesView({
   packageFiles = [],
-  isLoading = false,
+  arePackageFilesFetched = false,
   onFileClicked,
 }: FilesViewProps) {
   const [activeDir, setActiveDir] = useState("")
@@ -106,12 +101,19 @@ export default function FilesView({
   }, [packageFiles, showHiddenFiles])
   // Format date for display
   const formatDate = (dateString: string) => {
-    const date = new Date(dateString)
+    const parsedDate = new Date(dateString)
+    if (Number.isNaN(parsedDate.getTime())) return ""
+
     const now = new Date()
-    const diffTime = Math.abs(now.getTime() - date.getTime())
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+    const diffMs = now.getTime() - parsedDate.getTime()
+    const oneDayMs = 1000 * 60 * 60 * 24
+
+    // Treat future dates as today
+    if (diffMs <= 0) return "today"
 
-    if (diffDays < 1) return "today"
+    if (diffMs < oneDayMs) return "today"
+
+    const diffDays = Math.floor(diffMs / oneDayMs)
     if (diffDays === 1) return "yesterday"
     if (diffDays < 7) return `${diffDays} days ago`
     if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`
@@ -160,7 +162,7 @@ export default function FilesView({
 
   const toggleHiddenFiles = () => setShowHiddenFiles((prev) => !prev)
 
-  if (isLoading) {
+  if (!arePackageFilesFetched) {
     return (
       <div className="mb-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
         <div className="flex items-center px-4 py-2 md:py-3 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
@@ -225,7 +227,6 @@ export default function FilesView({
           </div>
         </div>
       </div>
-
       {/* Files and Directories */}
       <div className="bg-white dark:bg-[#0d1117]">
         {items.length === 0 && !activeDir ? (

package/src/components/ViewPackagePage/components/theme-toggle.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useTheme } from "next-themes"
 import { Moon, Sun } from "lucide-react"
 import { Button } from "@/components/ui/button"

package/src/components/ViewPackagePage/hooks/use-toast.tsx

@@ -1,4 +1,3 @@
-"use client"
 import toastLibrary, { Toaster, type Toast } from "react-hot-toast"
 import React from "react"
 

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

@@ -7,7 +7,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 +14,7 @@ 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"
 
 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,
@@ -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
         })) ||
@@ -103,29 +108,6 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
 
   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,17 +153,10 @@ 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>
-    )
-  }
-
+  const finalfsMap = useMemo(
+    () => (Object.keys(fsMap).length > 0 ? fsMap : {}),
+    [fsMap],
+  )
   return (
     <div className="flex flex-col min-h-[50vh]">
       <EditorNav
@@ -213,8 +188,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}
@@ -255,7 +236,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
             onEditEvent={(event) => {
               handleEditEvent(event)
             }}
-            fsMap={fsMap ?? {}}
+            fsMap={finalfsMap}
             projectUrl={projectUrl}
           />
         </div>
@@ -265,3 +246,5 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     </div>
   )
 }
+
+export default CodeAndPreview

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

@@ -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)
@@ -120,10 +129,13 @@ 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
 
+    // 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
@@ -825,10 +837,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 +871,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

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

@@ -41,6 +41,7 @@ interface CodeEditorHeaderProps {
   handleFileChange: (filename: FileName) => void
   entrypointFileName?: string
   appendNewFile: (path: string, content: string) => void
+  isLoadingFiles: boolean
   createFile: (props: ICreateFileProps) => ICreateFileResult
   aiAutocompleteState: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
@@ -49,8 +50,8 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   currentFile,
   files,
   updateFileContent,
-  appendNewFile,
   fileSidebarState,
+  isLoadingFiles = true,
   handleFileChange,
   entrypointFileName = "index.tsx",
   createFile,
@@ -230,7 +231,9 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                     (filename) => !isHiddenFile(filename),
                   ).length > 0
                     ? "Select file"
-                    : "No files"
+                    : isLoadingFiles
+                      ? "Loading files..."
+                      : "No files"
                 }
               />
             </SelectTrigger>