feat: hint lazy mode

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 }) => (

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>

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>
   )

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();

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 = {