From 95a2efb6ac4edfa9655de901e90462551131ef00 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 12 May 2021 23:23:05 +0800
Subject: [PATCH] feat: show progress when getting access token

---
 src/components/OAuthWrapper.tsx | 16 +++++++++++++---
 src/components/RepoContext.tsx  | 22 +++++++++++++---------
 src/components/SideBar.tsx      |  2 ++
 src/components/SideBarState.tsx |  2 ++
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/OAuthWrapper.tsx b/src/components/OAuthWrapper.tsx
index 0390972..e375e64 100644
--- a/src/components/OAuthWrapper.tsx
+++ b/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
diff --git a/src/components/RepoContext.tsx b/src/components/RepoContext.tsx
index 0bfdedd..d93ee89 100644
--- a/src/components/RepoContext.tsx
+++ b/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
 }
 
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index fe48661..95d3e9d 100644
--- a/src/components/SideBar.tsx
+++ b/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':
diff --git a/src/components/SideBarState.tsx b/src/components/SideBarState.tsx
index f41e30f..815a122 100644
--- a/src/components/SideBarState.tsx
+++ b/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'