From 5a2ba38094255d6bd7b9c7e2e2f862c5f948eb7b Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 24 Apr 2022 22:12:22 +0800
Subject: [PATCH] chore: enhance lazy mode UI

---
 src/components/FileExplorer.tsx | 24 +++++++++++++-----------
 src/driver/core/FileExplorer.ts |  2 +-
 src/styles/index.scss           | 14 +++++++++++---
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index 587a643..b574347 100644
--- a/src/components/FileExplorer.tsx
+++ b/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>
-                  )}
                 </>
               )
             )
diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
index 00e075e..5498a97 100644
--- a/src/driver/core/FileExplorer.ts
+++ b/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,
         },
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6d9754f..6499a10 100644
--- a/src/styles/index.scss
+++ b/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;