feat: show progress when getting access token

src/components/OAuthWrapper.tsx

@@ -2,17 +2,27 @@ import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { parseURLSearch, run } from 'utils/general'
+import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useStateIO } from 'utils/hooks/useStateIO'
+import { SideBarStateContext } from './SideBarState'
 
 /**
  * Setup access token before sending other requests
  */
 export function OAuthWrapper({ children }: React.PropsWithChildren<{}>) {
-  const running = useSetAccessToken()
-  return running ? null : <>{children}</>
+  const running = useGetAccessToken()
+  const $state = useLoadedContext(SideBarStateContext)
+
+  React.useEffect(() => {
+    $state.onChange(running ? 'getting-access-token' : 'after-getting-access-token')
+  }, [running])
+
+  // block children rendering on the first render if setting token
+  if (running && $state.value !== 'getting-access-token') return null
+  return <>{children}</>
 }
 
-function useSetAccessToken() {
+function useGetAccessToken() {
   const $block = useStateIO(() => Boolean(getCodeSearchParam()))
   const configContext = useConfigs()
   const { accessToken } = configContext.value

src/components/RepoContext.tsx

@@ -12,13 +12,6 @@ export const RepoContext = React.createContext<MetaData | null>(null)
 
 export function RepoContextWrapper({ children }: React.PropsWithChildren<{}>) {
   const partialMetaData = usePartialMetaData()
-  const $state = useLoadedContext(SideBarStateContext)
-
-  React.useEffect(() => {
-    if (!partialMetaData) {
-      $state.onChange('disabled')
-    }
-  }, [partialMetaData])
   const defaultBranch = useDefaultBranch(partialMetaData)
   const metaData = useMetaData(partialMetaData, defaultBranch)
 
@@ -40,15 +33,26 @@ function resolvePartialMetaData() {
 }
 
 function usePartialMetaData(): PartialMetaData | null {
+  const $state = useLoadedContext(SideBarStateContext)
+  const isGettingAccessToken = $state.value === 'getting-access-token' // will be false after getting access token and trigger meta-resolve progress
   // sync along URL and DOM
-  const $partialMetaData = useStateIO(resolvePartialMetaData)
+  const $partialMetaData = useStateIO(isGettingAccessToken ? null : resolvePartialMetaData)
   const $committedPartialMetaData = useStateIO($partialMetaData.value)
-  useOnPJAXDone(() => $partialMetaData.onChange(resolvePartialMetaData()))
+  const setPartialMetaData = () => $partialMetaData.onChange(resolvePartialMetaData())
+  React.useEffect(() => {
+    if (!isGettingAccessToken) setPartialMetaData()
+  }, [isGettingAccessToken])
+  useOnPJAXDone(setPartialMetaData)
   useEffectOnSerializableUpdates(
     $partialMetaData.value,
     JSON.stringify,
     $committedPartialMetaData.onChange,
   )
+  React.useEffect(() => {
+    if (!$partialMetaData.value && !isGettingAccessToken) {
+      $state.onChange('disabled')
+    }
+  }, [$partialMetaData.value])
   return $committedPartialMetaData.value
 }
 

src/components/SideBar.tsx

@@ -139,6 +139,8 @@ export function SideBar() {
                 switch (state) {
                   case 'disabled':
                     return null
+                  case 'getting-access-token':
+                    return <LoadingIndicator text={'Getting access token...'} />
                   case 'meta-loading':
                     return <LoadingIndicator text={'Fetching repo meta...'} />
                   case 'error-due-to-auth':

src/components/SideBarState.tsx

@@ -3,6 +3,8 @@ import { useStateIO } from 'utils/hooks/useStateIO'
 
 export type SideBarState =
   | 'disabled'
+  | 'getting-access-token'
+  | 'after-getting-access-token' // mid-state for a smoother state switch out of 'getting-access-token'
   | 'meta-loading'
   | 'meta-loaded'
   | 'tree-loading'