From 8c970d7fb49067b48a997d83c9ac2d59302691e2 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 27 Oct 2020 22:45:56 +0800
Subject: [PATCH] feat: hint lazy mode

---
 src/components/FileExplorer.tsx         | 14 ++++++++++---
 src/components/SideBar.tsx              |  8 +++++--
 src/components/settings/SettingsBar.tsx | 28 ++++++++++++++++++-------
 src/content.scss                        |  7 +++++++
 src/driver/core/FileExplorer.ts         |  1 +
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index ef09a26..904bd2b 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -30,6 +30,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
     expandTo,
     setUpTree,
     treeRoot,
+    defer,
   } = props
   const { val: config } = useConfigs()
 
@@ -87,9 +88,16 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
               onFocus={props.onFocusSearchBar}
             />
             {visibleNodes.lastMatch?.match.searchKey !== '' && visibleNodes.nodes.length === 0 && (
-              <Text marginTop={6} textAlign="center" color="text.gray">
-                No results found.
-              </Text>
+              <>
+                <Text marginTop={6} textAlign="center" color="text.gray">
+                  No results found.
+                </Text>
+                {defer && (
+                  <Text textAlign="center" color="gray.4" fontSize="12px">
+                    Lazy mode is ON. Search results are limited to loaded folders.
+                  </Text>
+                )}
+              </>
             )}
             <SizeObserver className={'files'}>
               {({ width = 0, height = 0 }) => (
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 135a5fb..13b969e 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -120,7 +120,6 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
           <div className={'gitako-side-bar-content'}>
             <div className={'header'}>
               {metaData ? <MetaBar metaData={metaData} /> : <div />}
-              {defer && <p>In Async Mode</p>}
               <div className={'close-side-bar-button-position'}>
                 <button className={'close-side-bar-button'} onClick={toggleShowSideBar}>
                   <Icon className={'action-icon'} type={'x'} />
@@ -139,11 +138,16 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
                   accessToken={accessToken}
                   loadWithPJAX={loadWithPJAX}
                   config={configContext.val}
+                  defer={defer}
                 />
               )
             )}
           </div>
-          <SettingsBar toggleShowSettings={toggleShowSettings} activated={showSettings} />
+          <SettingsBar
+            defer={defer}
+            toggleShowSettings={toggleShowSettings}
+            activated={showSettings}
+          />
         </div>
       </Resizable>
     </div>
diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index df56029..d5179e6 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@primer/components'
+import { Label, Link } from '@primer/components'
 import { Icon } from 'components/Icon'
 import { VERSION } from 'env'
 import { platform } from 'platforms'
@@ -21,6 +21,7 @@ export const wikiLinks = {
 }
 
 type Props = {
+  defer?: boolean
   activated: boolean
   toggleShowSettings: () => void
 }
@@ -79,7 +80,7 @@ function SettingsBarContent() {
 }
 
 export function SettingsBar(props: Props) {
-  const { toggleShowSettings, activated } = props
+  const { defer, toggleShowSettings, activated } = props
   return (
     <div className={'gitako-settings-bar'}>
       {activated && <SettingsBarContent />}
@@ -93,13 +94,24 @@ export function SettingsBar(props: Props) {
         >
           {VERSION}
         </Link>
-        <button className={'settings-button'} onClick={toggleShowSettings}>
-          {activated ? (
-            <Icon type={'chevron-down'} className={'hide-settings-icon'} />
-          ) : (
-            <Icon type={'gear'} className={'show-settings-icon'} />
+        <div className={'header-right'}>
+          {defer && (
+            <Label
+              title="File tree data is loaded on demand. And search results are limited."
+              bg="yellow.5"
+              color="gray.6"
+            >
+              Lazy Mode
+            </Label>
           )}
-        </button>
+          <button className={'settings-button'} onClick={toggleShowSettings}>
+            {activated ? (
+              <Icon type={'chevron-down'} className={'hide-settings-icon'} />
+            ) : (
+              <Icon type={'gear'} className={'show-settings-icon'} />
+            )}
+          </button>
+        </div>
       </div>
     </div>
   )
diff --git a/src/content.scss b/src/content.scss
index 8779c5c..4d66c31 100644
--- a/src/content.scss
+++ b/src/content.scss
@@ -612,6 +612,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         padding: 2px 6px 2px 10px;
         border-top: 1px solid $border-gray-light;
 
+        .header-right {
+          display: flex;
+          align-items: center;
+          user-select: none;
+          cursor: help; // Will this make user hover for more time to see the tooltip?
+        }
+
         .settings-button {
           @include icon-button();
           @include button-color();
diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
index c2cbea1..e9d6d51 100644
--- a/src/driver/core/FileExplorer.ts
+++ b/src/driver/core/FileExplorer.ts
@@ -12,6 +12,7 @@ export type Props = {
   toggleShowSettings: React.MouseEventHandler
   config: Config
   loadWithPJAX(url: string): void
+  defer?: boolean
 }
 
 export type ConnectorState = {