chore: enhance lazy mode UI

src/components/FileExplorer.tsx

@@ -185,6 +185,18 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
               visibleNodes &&
               renderNodeContext && (
                 <>
+                  {defer && (
+                    <div className={'status'}>
+                      <Label
+                        title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded when it gets expanded."
+                        bg="yellow.5"
+                        color="gray.6"
+                        className={'lazy-mode'}
+                      >
+                        Lazy Mode is ON
+                      </Label>
+                    </div>
+                  )}
                   <SearchBar value={searchKey} onSearch={onSearch} onFocus={onFocusSearchBar} />
                   {searched && visibleNodes.nodes.length === 0 && (
                     <>
@@ -193,7 +205,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
                       </Text>
                       {defer && (
                         <Text textAlign="center" color="gray.4" fontSize="12px">
-                          Lazy mode is ON. Search results are limited to loaded folders.
+                          Search results are limited to loaded folders in Lazy Mode.
                         </Text>
                       )}
                     </>
@@ -211,16 +223,6 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
                       </div>
                     )}
                   </SizeObserver>
-
-                  {defer && (
-                    <Label
-                      title="File tree data is loaded on demand. And search results are limited."
-                      bg="yellow.5"
-                      color="gray.6"
-                    >
-                      Lazy Mode
-                    </Label>
-                  )}
                 </>
               )
             )

src/driver/core/FileExplorer.ts

@@ -65,7 +65,7 @@ export const setUpTree: BoundMethodCreator<
 
       const { root: treeRoot, defer = false } = await platform.getTreeData(
         {
-          branchName: branchName,
+          branchName,
           userName,
           repoName,
         },

src/styles/index.scss

@@ -158,9 +158,9 @@ $minimal-z-index: max(
         }
 
         .blob-code::after {
-            color: var(--gitako-fg-muted);
-            content: '⋯';
-            margin: 0.1em 0.2em 0px;
+          color: var(--gitako-fg-muted);
+          content: '⋯';
+          margin: 0.1em 0.2em 0px;
         }
       }
 
@@ -634,6 +634,14 @@ $minimal-z-index: max(
           }
         }
 
+        .status {
+          padding: 4px;
+
+          .lazy-mode {
+            cursor: help;
+          }
+        }
+
         .files {
           position: relative;
           flex: 1;