@tscircuit/fake-snippets 0.0.108 → 0.0.109

package/src/hooks/useFileManagement.ts

@@ -6,7 +6,7 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 import { usePackageFiles } from "./use-package-files"
 import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
 import { decodeUrlHashToFsMap } from "@/lib/decodeUrlHashToFsMap"
-import { usePackageFilesLoader } from "./usePackageFilesLoader"
+import { useOptimizedPackageFilesLoader } from "./useOptimizedPackageFilesLoader"
 import { useGlobalStore } from "./use-global-store"
 import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
 import { useUpdatePackageFilesMutation } from "./useUpdatePackageFilesMutation"
@@ -15,6 +15,7 @@ import { useCreatePackageMutation } from "./use-create-package-mutation"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
 import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
+import { isComponentExported } from "@/lib/utils/isComponentExported"
 
 export interface ICreateFileProps {
   newFileName: string
@@ -47,27 +48,37 @@ export interface IRenameFileResult {
 export function useFileManagement({
   templateCode,
   currentPackage,
-  fileChoosen,
   openNewPackageSaveDialog,
   updateLastUpdated,
+  urlParams,
 }: {
   templateCode?: string
   currentPackage?: Package
-  fileChoosen: string | null
   openNewPackageSaveDialog: () => void
+  urlParams: Record<string, string>
   updateLastUpdated: () => void
 }) {
+  const fileChosen = urlParams.file_path ?? null
   const [localFiles, setLocalFiles] = useState<PackageFile[]>([])
   const [initialFiles, setInitialFiles] = useState<PackageFile[]>([])
   const [currentFile, setCurrentFile] = useState<string | null>(null)
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-  const loggedInUser = useGlobalStore((s) => s.session)
   const { toast } = useToast()
   const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const {
-    data: packageFilesWithContent,
-    isLoading: isLoadingPackageFilesWithContent,
-  } = usePackageFilesLoader(currentPackage)
+    priorityFile,
+    allFiles: packageFilesWithContent,
+    isPriorityLoading,
+    areAllFilesLoading: isLoadingPackageFilesWithContent,
+    totalFilesCount,
+    loadedFilesCount,
+    isPriorityFileFetched,
+  } = useOptimizedPackageFilesLoader(
+    currentPackage,
+    fileChosen,
+    urlParams.package_id,
+  )
+
   const { data: packageFilesMeta, isLoading: isLoadingPackageFiles } =
     usePackageFiles(currentPackage?.latest_package_release_id)
   const initialCodeContent = useMemo(() => {
@@ -127,7 +138,7 @@ export function useFileManagement({
   })
 
   useEffect(() => {
-    if (!currentPackage || isLoadingPackageFilesWithContent) {
+    if (!currentPackage || isPriorityLoading) {
       const decodedFsMap = decodeUrlHashToFsMap(window.location.toString())
 
       if (decodedFsMap && Object.keys(decodedFsMap).length > 0) {
@@ -137,38 +148,114 @@ export function useFileManagement({
             content: String(content),
           }),
         )
-        const targetFile = findTargetFile(filesFromUrl, fileChoosen)
+        const targetFile = findTargetFile(filesFromUrl, fileChosen)
         setLocalFiles(filesFromUrl)
         setInitialFiles([])
         setCurrentFile(targetFile?.path || filesFromUrl[0]?.path || null)
         return
       }
 
-      setLocalFiles([
-        {
-          path: "index.tsx",
-          content: initialCodeContent || "",
-        },
-      ])
-      setInitialFiles([])
-      setCurrentFile("index.tsx")
+      if (!urlParams.package_id) {
+        setLocalFiles([
+          {
+            path: "index.tsx",
+            content: initialCodeContent || "",
+          },
+        ])
+        setInitialFiles([])
+        setCurrentFile("index.tsx")
+      }
       return
-    } else {
-      const targetFile = findTargetFile(
-        packageFilesWithContent || [],
-        fileChoosen,
-      )
-      setLocalFiles(packageFilesWithContent || [])
-      setInitialFiles(packageFilesWithContent || [])
-      setCurrentFile(targetFile?.path || null)
     }
-  }, [currentPackage, isLoadingPackageFilesWithContent])
+  }, [currentPackage, isPriorityLoading])
+
+  useEffect(() => {
+    if (priorityFile && !isPriorityLoading && currentPackage) {
+      setLocalFiles((prev) => {
+        const existingIndex = prev.findIndex(
+          (f) => f.path === priorityFile.path,
+        )
+        if (existingIndex >= 0) {
+          const updated = [...prev]
+          updated[existingIndex] = priorityFile
+          return updated
+        }
+        return [...prev, priorityFile]
+      })
+
+      setCurrentFile((prevCurrentFile) => {
+        if (fileChosen && priorityFile.path === fileChosen) {
+          return priorityFile.path
+        } else if (!prevCurrentFile) {
+          return priorityFile.path
+        } else {
+          // If priority file is index.tsx, always update to it
+          const isPriorityFileBetter = priorityFile.path === "index.tsx"
+          if (isPriorityFileBetter) {
+            return priorityFile.path
+          }
+        }
+        return prevCurrentFile
+      })
+    }
+  }, [priorityFile, isPriorityLoading, currentPackage, fileChosen])
+
+  useEffect(() => {
+    if (packageFilesWithContent.length > 0 && currentPackage) {
+      setLocalFiles(packageFilesWithContent)
+      setInitialFiles(packageFilesWithContent)
+
+      if (fileChosen) {
+        const targetFile =
+          packageFilesWithContent.find((f) => f.path === fileChosen) ||
+          findTargetFile(packageFilesWithContent, fileChosen)
+        if (targetFile) {
+          setCurrentFile((prevCurrentFile) => {
+            return targetFile.path !== prevCurrentFile
+              ? targetFile.path
+              : prevCurrentFile
+          })
+        }
+      } else {
+        setCurrentFile((prevCurrentFile) => {
+          if (!prevCurrentFile) {
+            // Wait for priority file to load before making selection to avoid flicker
+            // Only select if we have a good candidate (tsx/ts file) or priority file isn't loading
+            const targetFile = findTargetFile(
+              packageFilesWithContent,
+              fileChosen,
+            )
+            // Only consider it a "good enough" candidate if it's index.tsx
+            // Otherwise, wait for the actual priority file (index.tsx) to load
+            const isTopPriorityFile =
+              targetFile && targetFile.path === "index.tsx"
+            const shouldWaitForPriority =
+              isPriorityLoading && !isTopPriorityFile
+
+            if (shouldWaitForPriority) {
+              return prevCurrentFile // Keep null to avoid flicker
+            }
+
+            return targetFile ? targetFile.path : prevCurrentFile
+          }
+          return prevCurrentFile
+        })
+      }
+    }
+  }, [
+    packageFilesWithContent.length,
+    currentPackage,
+    fileChosen,
+    isPriorityLoading,
+  ])
 
   const isLoading = useMemo(() => {
-    return (
-      isLoadingPackageFilesWithContent || isLoadingPackageFiles || !localFiles
-    )
-  }, [isLoadingPackageFilesWithContent, localFiles, isLoadingPackageFiles])
+    return isPriorityLoading || isLoadingPackageFiles
+  }, [isPriorityLoading, isLoadingPackageFiles])
+
+  const isFullyLoaded = useMemo(() => {
+    return !isLoadingPackageFilesWithContent && !isLoadingPackageFiles
+  }, [isLoadingPackageFilesWithContent, isLoadingPackageFiles])
 
   const fsMap = useMemo(() => {
     const map = localFiles.reduce(
@@ -178,6 +265,7 @@ export function useFileManagement({
       },
       {} as Record<string, string>,
     )
+
     return map
   }, [localFiles, manualEditsFileContent])
 
@@ -215,7 +303,6 @@ export function useFileManagement({
       }
     }
 
-    // Check if file already exists
     const fileExists = localFiles?.some((file) => file.path === newFileName)
     if (fileExists) {
       onError(new Error(`File '${newFileName}' already exists`))
@@ -224,7 +311,6 @@ export function useFileManagement({
       }
     }
 
-    // Ensure file name is not empty after path construction
     const fileName = newFileName.split("/").pop() || ""
     if (!fileName.trim()) {
       onError(new Error("File name cannot be empty"))
@@ -282,7 +368,6 @@ export function useFileManagement({
       }
     }
 
-    // Extract just the filename from the path for validation
     const fileNameOnly = newFilename.split("/").pop() || ""
     if (!isValidFileName(fileNameOnly)) {
       onError(new Error("Invalid file name"))
@@ -395,7 +480,6 @@ export function useFileManagement({
 
   const saveFiles = () => {
     if (!isLoggedIn) {
-      // For non-logged-in users, trigger immediate URL save
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current)
       }
@@ -433,20 +517,55 @@ export function useFileManagement({
     isCreatingRelease,
   ])
 
+  const currentFileCode = useMemo(
+    () =>
+      localFiles.find((x) => x.path === currentFile)?.content ?? DEFAULT_CODE,
+    [localFiles, currentFile],
+  )
+  const mainComponentPath = useMemo(() => {
+    const isComponentExportedInCurrentFile =
+      isComponentExported(currentFileCode)
+
+    const selectedComponent =
+      (currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts")) &&
+      !!localFiles.some((x) => x.path === currentFile) &&
+      isComponentExportedInCurrentFile
+        ? currentFile
+        : localFiles.find((x) => {
+            const isComponentExportedInFile = isComponentExported(x.content)
+            return (
+              x.path.endsWith(".tsx") ||
+              (x.path.endsWith(".ts") && isComponentExportedInFile)
+            )
+          })?.path || localFiles[0]?.path
+
+    return selectedComponent
+  }, [currentFile, localFiles, currentFileCode, packageFilesWithContent])
+
+  const priorityFileFetched = useMemo(() => {
+    return urlParams.package_id && isPriorityFileFetched
+  }, [urlParams.package_id, isPriorityFileFetched])
+
   return {
     fsMap,
     createFile,
+    priorityFileFetched,
     deleteFile,
     renameFile,
     saveFiles,
     localFiles,
+    mainComponentPath,
+    currentFileCode,
     initialFiles,
     currentFile,
     setLocalFiles,
     onFileSelect,
     isLoading,
+    isFullyLoaded,
     isSaving,
     savePackage,
     packageFilesMeta,
+    totalFilesCount,
+    loadedFilesCount,
   }
 }

package/src/hooks/useOptimizedPackageFilesLoader.ts

@@ -0,0 +1,149 @@
+import { useQuery, useQueries } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { usePackageFiles } from "@/hooks/use-package-files"
+import { usePackageFileById } from "@/hooks/use-package-files"
+import type { Package } from "fake-snippets-api/lib/db/schema"
+import { useState, useMemo } from "react"
+import { findTargetFile } from "@/lib/utils/findTargetFile"
+
+export interface PackageFile {
+  path: string
+  content: string
+}
+
+export interface OptimizedLoadingState {
+  priorityFile: PackageFile | null
+  allFiles: PackageFile[]
+  isPriorityLoading: boolean
+  areAllFilesLoading: boolean
+  error: any
+}
+
+export function useOptimizedPackageFilesLoader(
+  pkg?: Package,
+  priorityFilePath?: string | null,
+  packageId?: string | null,
+) {
+  const axios = useAxios()
+  const [loadedFiles, setLoadedFiles] = useState<Map<string, PackageFile>>(
+    new Map(),
+  )
+
+  const pkgFilesRaw = usePackageFiles(pkg?.latest_package_release_id)
+
+  // Filter out dist/ files to avoid downloading build artifacts
+  const pkgFiles = useMemo(
+    () => ({
+      ...pkgFilesRaw,
+      data: pkgFilesRaw.data?.filter(
+        (file) => !file.file_path.startsWith("dist/"),
+      ),
+    }),
+    [pkgFilesRaw.data, pkgFilesRaw.isLoading, pkgFilesRaw.error],
+  )
+
+  const targetFilePath = useMemo(() => {
+    if (!pkgFiles.data) return priorityFilePath
+
+    if (priorityFilePath) {
+      const exactMatch = pkgFiles.data.find(
+        (f) => f.file_path === priorityFilePath,
+      )
+      if (exactMatch) return exactMatch.file_path
+
+      const partialMatch = pkgFiles.data.find(
+        (f) =>
+          f.file_path.includes(priorityFilePath) ||
+          priorityFilePath.includes(f.file_path),
+      )
+      if (partialMatch) return partialMatch.file_path
+    }
+
+    // Check for index.tsx first
+    const indexFile = pkgFiles.data.find((f) => f.file_path === "index.tsx")
+    if (indexFile) return indexFile.file_path
+
+    // Fallback to first file
+    return pkgFiles.data[0]?.file_path || null
+  }, [pkgFiles.data, priorityFilePath])
+
+  const priorityFileData = pkgFiles.data?.find(
+    (file) => file.file_path === targetFilePath,
+  )
+
+  const priorityFileQuery = useQuery({
+    queryKey: ["priorityPackageFile", priorityFileData?.package_file_id],
+    queryFn: async () => {
+      if (!priorityFileData) return null
+
+      const response = await axios.post(`/package_files/get`, {
+        package_file_id: priorityFileData.package_file_id,
+      })
+      const content = response.data.package_file?.content_text
+      const file = { path: priorityFileData.file_path, content: content ?? "" }
+
+      setLoadedFiles((prev) => {
+        const newMap = new Map(prev)
+        newMap.set(file.path, file)
+        return newMap
+      })
+
+      return file
+    },
+    enabled: !!priorityFileData,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    staleTime: Infinity,
+    cacheTime: Infinity,
+  })
+
+  const remainingFilesQueries = useQueries(
+    pkgFiles.data
+      ?.filter((file) => file.file_path !== targetFilePath)
+      ?.map((file) => ({
+        queryKey: ["packageFile", file.package_file_id],
+        queryFn: async () => {
+          const response = await axios.post(`/package_files/get`, {
+            package_file_id: file.package_file_id,
+          })
+          const content = response.data.package_file?.content_text
+          const fileData = { path: file.file_path, content: content ?? "" }
+
+          setLoadedFiles((prev) => {
+            const newMap = new Map(prev)
+            newMap.set(fileData.path, fileData)
+            return newMap
+          })
+
+          return fileData
+        },
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+        staleTime: Infinity,
+        cacheTime: Infinity,
+      })) ?? [],
+  )
+
+  const allFiles = useMemo(() => {
+    return Array.from(loadedFiles.values())
+  }, [loadedFiles])
+
+  const areAllFilesLoading =
+    remainingFilesQueries.some((q) => q.isLoading) ||
+    priorityFileQuery.isLoading
+  const error =
+    priorityFileQuery.error || remainingFilesQueries.find((q) => q.error)?.error
+
+  return {
+    priorityFile: priorityFileQuery.data || null,
+    priorityFileFetched: priorityFileQuery.isFetched,
+    allFiles,
+    isPriorityLoading: priorityFileQuery.isLoading,
+    areAllFilesLoading,
+    error,
+    isMetaLoading: pkgFiles.isLoading,
+    totalFilesCount: pkgFiles.data?.length || 0,
+    loadedFilesCount: allFiles.length,
+    isPriorityFileFetched: priorityFileQuery.isFetched,
+  }
+}

package/src/hooks/useUpdatePackageFilesMutation.ts

@@ -2,6 +2,7 @@ import { useMutation } from "react-query"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 import { useAxios } from "./use-axios"
 import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
+import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
 
 interface PackageFile {
   path: string
@@ -42,6 +43,7 @@ export function useUpdatePackageFilesMutation({
       let updatedFilesCount = 0
 
       for (const file of localFiles) {
+        if (isHiddenFile(file.path)) continue
         const initialFile = initialFiles.find((x) => x.path === file.path)
         if (file.content !== initialFile?.content) {
           const updatePkgFilePayload = {

package/src/lib/download-fns/download-circuit-png.ts

@@ -1,3 +1,4 @@
+import { convertCircuitJsonToSimple3dSvg } from "circuit-json-to-simple-3d"
 import { AnyCircuitElement } from "circuit-json"
 import {
   convertCircuitJsonToAssemblySvg,
@@ -6,7 +7,7 @@ import {
 } from "circuit-to-svg"
 import { saveAs } from "file-saver"
 
-export type ImageFormat = "schematic" | "pcb" | "assembly"
+export type ImageFormat = "schematic" | "pcb" | "assembly" | "3d"
 
 interface DownloadCircuitPngOptions {
   format: ImageFormat
@@ -65,7 +66,7 @@ export const downloadCircuitPng = async (
     if (options.width) svgOptions.width = options.width
     if (options.height) svgOptions.height = options.height
 
-    switch (options.format) {
+    switch (options.format.toLowerCase()) {
       case "schematic":
         svg = convertCircuitJsonToSchematicSvg(circuitJson, svgOptions)
         break
@@ -76,13 +77,20 @@ export const downloadCircuitPng = async (
         svg = convertCircuitJsonToAssemblySvg(circuitJson, svgOptions)
         break
       default:
-        throw new Error(`Unsupported format: ${options.format}`)
+        svg = await convertCircuitJsonToSimple3dSvg(circuitJson, {
+          background: {
+            color: "#fff",
+            opacity: 0.0,
+          },
+          defaultZoomMultiplier: 1.1,
+        })
     }
 
     blob = await convertSvgToPng(svg)
     const downloadFileName = `${fileName}_${options.format}.png`
     saveAs(blob, downloadFileName)
   } catch (error) {
+    console.error(error)
     throw new Error(`Failed to download ${options.format} PNG: ${error}`)
   }
 }

package/src/lib/download-fns/download-gltf-from-circuit-json.ts

@@ -0,0 +1,44 @@
+import { CircuitJson } from "circuit-json"
+import { saveAs } from "file-saver"
+import {
+  convertCircuitJsonToGltf,
+  type ConversionOptions,
+} from "circuit-json-to-gltf"
+export const downloadGltfFromCircuitJson = async (
+  circuitJson: CircuitJson,
+  fileName: string,
+  options?: ConversionOptions,
+) => {
+  const result = await convertCircuitJsonToGltf(circuitJson, options)
+
+  let blob: Blob
+  let extension = options?.format === "glb" ? ".glb" : ".gltf"
+
+  if (result instanceof ArrayBuffer) {
+    blob = new Blob([result], { type: "model/gltf-binary" })
+    extension = options?.format
+      ? options.format === "glb"
+        ? ".glb"
+        : ".gltf"
+      : ".glb"
+  } else if (
+    typeof ArrayBuffer !== "undefined" &&
+    result &&
+    typeof (result as any).buffer === "object" &&
+    (result as any).byteLength !== undefined
+  ) {
+    const view = result as ArrayBufferView
+    blob = new Blob([view], { type: "model/gltf-binary" })
+    extension = options?.format
+      ? options.format === "glb"
+        ? ".glb"
+        : ".gltf"
+      : ".glb"
+  } else if (typeof result === "string") {
+    blob = new Blob([result], { type: "model/gltf+json" })
+  } else {
+    blob = new Blob([JSON.stringify(result)], { type: "model/gltf+json" })
+  }
+
+  saveAs(blob, fileName + extension)
+}

package/src/lib/utils/isComponentExported.ts

@@ -0,0 +1,9 @@
+export const isComponentExported = (code: string) => {
+  return (
+    /export function\s+\w+/.test(code) ||
+    /export const\s+\w+\s*=/.test(code) ||
+    /export default\s+\w+/.test(code) ||
+    /export default\s+function\s*(\w*)\s*\(/.test(code) ||
+    /export default\s*\(\s*\)\s*=>/.test(code)
+  )
+}

package/src/pages/authorize.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import Header from "@/components/Header"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useEffect, useState } from "react"

package/src/pages/landing.tsx

@@ -232,7 +232,6 @@ export function LandingPage() {
         </section>
       </main>
       <Footer />
-      {/* <Footer2 /> */}
     </div>
   )
 }

package/src/pages/preview-release.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useParams } from "wouter"
 import { Loader2, ChevronLeft, ChevronRight } from "lucide-react"
 import Header from "@/components/Header"
@@ -14,6 +14,7 @@ import { usePackageFilesLoader } from "@/hooks/usePackageFilesLoader"
 import { usePackageBuild } from "@/hooks/use-package-builds"
 import { PackageBuild } from "fake-snippets-api/lib/db/schema"
 import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { findTargetFile } from "@/lib/utils/findTargetFile"
 
 const StatusPill = ({ status }: { status: string }) => {
   const color =
@@ -38,7 +39,7 @@ export default function PreviewBuildPage() {
   const packageName = params?.packageName || null
 
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
-  const [selectedFile, setSelectedFile] = useState<string | null>("index.tsx")
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
   const [selectedItemId, setSelectedItemId] = useState<string>("")
 
   const { data: packageRelease, isLoading: isLoadingRelease } =
@@ -56,6 +57,15 @@ export default function PreviewBuildPage() {
     buildFiles.map((f) => [f.path, f.content]),
   )
 
+  const targetFile = findTargetFile(buildFiles, selectedFile)
+  const mainComponentPath = targetFile?.path ?? null
+
+  useEffect(() => {
+    if (!selectedFile && mainComponentPath) {
+      setSelectedFile(mainComponentPath)
+    }
+  }, [mainComponentPath, selectedFile])
+
   if (!packageReleaseId) {
     return <NotFoundPage heading="Package Release Not Found" />
   }
@@ -74,7 +84,7 @@ export default function PreviewBuildPage() {
 
   const treeData = transformFilesToTreeData({
     files: buildFsMap,
-    currentFile: selectedFile,
+    currentFile: selectedFile ?? mainComponentPath,
     renamingFile: null,
     handleRenameFile: () => ({ fileRenamed: false }),
     handleDeleteFile: () => ({ fileDeleted: false }),
@@ -221,7 +231,7 @@ export default function PreviewBuildPage() {
               ) : status === "success" && buildFiles.length > 0 ? (
                 <SuspenseRunFrame
                   fsMap={buildFsMap}
-                  mainComponentPath={selectedFile ?? "index.tsx"}
+                  mainComponentPath={mainComponentPath ?? "index.tsx"}
                   showRunButton={false}
                   className="[&>div]:overflow-y-hidden"
                 />

package/src/pages/view-package.tsx

@@ -5,18 +5,19 @@ import { useLocation, useParams } from "wouter"
 import { Helmet } from "react-helmet-async"
 import { useEffect, useState } from "react"
 import NotFoundPage from "./404"
-import { useCurrentPackageId } from "@/hooks/use-current-package-id"
-import { usePackage } from "@/hooks/use-package"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
 
 export const ViewPackagePage = () => {
-  const {
-    packageId,
-    error: packageIdError,
-    isLoading: isLoadingPackageId,
-  } = useCurrentPackageId()
-  const { data: packageInfo } = usePackage(packageId)
   const { author, packageName } = useParams()
+  const packageNameFull = `${author}/${packageName}`
   const [, setLocation] = useLocation()
+
+  // Get package data directly by name - this will also cache by ID
+  const {
+    data: packageInfo,
+    error: packageError,
+    isLoading: isLoadingPackage,
+  } = usePackageByName(packageNameFull)
   const {
     data: packageRelease,
     error: packageReleaseError,
@@ -33,11 +34,10 @@ export const ViewPackagePage = () => {
     },
   )
 
-  const { data: packageFiles } = usePackageFiles(
-    packageRelease?.package_release_id,
-  )
+  const { data: packageFiles, isFetched: arePackageFilesFetched } =
+    usePackageFiles(packageRelease?.package_release_id)
 
-  if (!isLoadingPackageId && packageIdError) {
+  if (!isLoadingPackage && packageError) {
     return <NotFoundPage heading="Package Not Found" />
   }
 
@@ -51,7 +51,8 @@ export const ViewPackagePage = () => {
         <title>{`${author}/${packageName} - tscircuit`}</title>
       </Helmet>
       <RepoPageContent
-        packageFiles={packageFiles as any}
+        packageFiles={packageFiles ?? []}
+        arePackageFilesFetched={arePackageFilesFetched}
         packageInfo={packageInfo}
         packageRelease={packageRelease}
         importantFilePaths={["README.md", "LICENSE", "package.json"]}