From bb4593fc2521a6e2a7dd473fac090e3dad8e1570 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 4 Feb 2021 14:45:44 +0800
Subject: [PATCH] feat: show loading indicator when fetching meta

---
 src/components/SideBar.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 96d044e..1c9707e 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -21,6 +21,7 @@ import { loadWithPJAX, useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
 import { useProgressBar } from 'utils/hooks/useProgressBar'
 import * as keyHelper from 'utils/keyHelper'
 import { Icon } from './Icon'
+import { LoadingIndicator } from './LoadingIndicator'
 import { Theme } from './Theme'
 
 const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
@@ -110,9 +111,15 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
               </button>
             </div>
             <div className={'gitako-side-bar-content'}>
-              <div className={'header'}>{metaData ? <MetaBar metaData={metaData} /> : <div />}</div>
+              {metaData ? (
+                <div className={'header'}>
+                  <MetaBar metaData={metaData} />
+                </div>
+              ) : (
+                <LoadingIndicator text={'Fetching repo meta...'} />
+              )}
               {errorDueToAuth ? (
-                <AccessDeniedError hasToken={Boolean(accessToken)} />
+                <AccessDeniedDescription hasToken={Boolean(accessToken)} />
               ) : (
                 metaData && (
                   <FileExplorer
@@ -162,10 +169,6 @@ function useShrinkGitHubHeader(shrinkGitHubHeader: boolean) {
   }, [shrinkGitHubHeader])
 }
 
-function AccessDeniedError({ hasToken }: { hasToken: boolean }) {
-  return <AccessDeniedDescription hasToken={hasToken} />
-}
-
 async function trySetUpAccessTokenWithCode() {
   const search = parseURLSearch()
   if ('code' in search) {