fix(ui): display a skeleton after switching repositories (#2080)

* fix(ui): display a skeleton after switching repositories * update skeleton * update * refactor: main panel skeleton * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TabbyML · May 9, 2024 · 9e480e6 · 9e480e6
1 parent e62d2ad
commit 9e480e6
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 42 deletions.
diff --git a/ee/tabby-ui/app/files/components/file-tree.tsx b/ee/tabby-ui/app/files/components/file-tree.tsx
@@ -275,7 +275,7 @@ const DirectoryTreeNode: React.FC<DirectoryTreeNodeProps> = ({
     onSelectTreeNode?.(node)
   }
 
-  const [loading] = useDebounceValue(isLoading, 300)
+  const [loading] = useDebounceValue(isLoading, 100)
 
   const existingChildren = !!node?.children?.length
 
@@ -330,6 +330,13 @@ const FileTreeRenderer: React.FC = () => {
     React.useContext(FileTreeContext)
   const { repositorySpecifier } = resolveRepositoryInfoFromPath(activePath)
 
+  const hasSelectedRepo = !!repositorySpecifier
+  const hasNoRepoEntries = hasSelectedRepo && !fileTreeData?.length
+  const fetchingRepoEntries =
+    activePath &&
+    fileMap?.[activePath]?.isRepository &&
+    !fileMap?.[activePath]?.treeExpanded
+
   if (!initialized) return <FileTreeSkeleton />
 
   if (isEmpty(fileMap))
@@ -339,16 +346,20 @@ const FileTreeRenderer: React.FC = () => {
       </div>
     )
 
-  if (repositorySpecifier && !fileTreeData?.length) {
+  if (!hasSelectedRepo) {
+    return null
+  }
+
+  if (hasNoRepoEntries) {
+    if (fetchingRepoEntries) {
+      return <FileTreeSkeleton />
+    }
+
     return (
       <div className="flex h-full items-center justify-center">No Data</div>
     )
   }
 
-  if (!repositorySpecifier) {
-    return null
-  }
-
   return (
     <>
       {fileTreeData?.map(node => {

diff --git a/ee/tabby-ui/app/files/components/source-code-browser.tsx b/ee/tabby-ui/app/files/components/source-code-browser.tsx
@@ -23,6 +23,7 @@ import {
   ResizablePanelGroup
 } from '@/components/ui/resizable'
 import { BANNER_HEIGHT, useShowDemoBanner } from '@/components/demo-banner'
+import { ListSkeleton } from '@/components/skeleton'
 import { useTopbarProgress } from '@/components/topbar-progress-indicator'
 
 import { emitter, QuickActionEventPayload } from '../lib/event-emitter'
@@ -260,7 +261,7 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
   }, [activePath, fileMap, initialized])
 
   // fetch raw file
-  const { data: rawFileResponse, isLoading: isRawFileLoading } =
+  const { data: rawFileResponse, isLoading: fetchingRawFile } =
     useSWRImmutable<{
       blob?: Blob
       contentLength?: number
@@ -291,14 +292,6 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
       }
     )
 
-  React.useEffect(() => {
-    if (isRawFileLoading) {
-      setProgress(true)
-    } else {
-      setProgress(false)
-    }
-  }, [isRawFileLoading])
-
   const fileBlob = rawFileResponse?.blob
   const contentLength = rawFileResponse?.contentLength
 
@@ -353,19 +346,36 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
     }
   }, [activePath])
 
+  React.useEffect(() => {
+    if (!initialized) return
+    if (fetchingSubTree || fetchingRawFile) {
+      setProgress(true)
+    } else if (!fetchingSubTree && !fetchingRawFile) {
+      setProgress(false)
+    }
+  }, [fetchingSubTree, fetchingRawFile])
+
   React.useEffect(() => {
     const onFetchSubTree = () => {
-      if (subTree?.entries?.length && activePath) {
+      if (Array.isArray(subTree?.entries) && activePath) {
         const { repositorySpecifier } =
           resolveRepositoryInfoFromPath(activePath)
         let patchMap: TFileMap = {}
-        for (const entry of subTree.entries) {
-          const path = `${repositorySpecifier}/${entry.basename}`
-          patchMap[path] = {
-            file: entry,
-            name: resolveFileNameFromPath(path),
-            fullPath: path,
-            treeExpanded: false
+        if (fileMap?.[activePath]) {
+          patchMap[activePath] = {
+            ...fileMap[activePath],
+            treeExpanded: true
+          }
+        }
+        if (subTree?.entries?.length) {
+          for (const entry of subTree.entries) {
+            const path = `${repositorySpecifier}/${entry.basename}`
+            patchMap[path] = {
+              file: entry,
+              name: resolveFileNameFromPath(path),
+              fullPath: path,
+              treeExpanded: false
+            }
           }
         }
         updateFileMap(patchMap)
@@ -437,25 +447,29 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
       <ResizablePanel defaultSize={80} minSize={30}>
         <div className="flex h-full flex-col overflow-y-auto px-4 pb-4">
           <FileDirectoryBreadcrumb className="py-4" />
-          <div>
-            {showDirectoryView && (
-              <DirectoryView
-                loading={fetchingSubTree}
-                initialized={initialized}
-                className={`rounded-lg border`}
-              />
-            )}
-            {showTextFileView && (
-              <TextFileView blob={fileBlob} contentLength={contentLength} />
-            )}
-            {showRawFileView && (
-              <RawFileView
-                blob={fileBlob}
-                isImage={fileViewType === 'image'}
-                contentLength={contentLength}
-              />
-            )}
-          </div>
+          {!initialized ? (
+            <ListSkeleton className="rounded-lg border p-4" />
+          ) : (
+            <div>
+              {showDirectoryView && (
+                <DirectoryView
+                  loading={fetchingSubTree}
+                  initialized={initialized}
+                  className={`rounded-lg border`}
+                />
+              )}
+              {showTextFileView && (
+                <TextFileView blob={fileBlob} contentLength={contentLength} />
+              )}
+              {showRawFileView && (
+                <RawFileView
+                  blob={fileBlob}
+                  isImage={fileViewType === 'image'}
+                  contentLength={contentLength}
+                />
+              )}
+            </div>
+          )}
         </div>
       </ResizablePanel>
       <>