Add loading state to google search console

plugins/google-search-console/src/App.tsx

@@ -112,7 +112,7 @@ function AppLoadSite({ login, logout }: AppLoadSiteProps) {
 }
 
 export function App() {
-  const { login, logout, tokens, isReady } = useGoogleToken();
+  const { login, logout, tokens, isReady, loading } = useGoogleToken();
 
   const ref = useRef<HTMLDivElement>(null)
 
@@ -125,6 +125,7 @@ export function App() {
 
             return (
               <GoogleLogin
+                loading={loading}
                 hasError
                 errorMessage={
                   e.error.name !== 'GoogleError' ? e.error.message || '' : ''
@@ -150,7 +151,7 @@ export function App() {
                   logout={logout}
                 />
               ) : (
-                <GoogleLogin login={login} />
+                <GoogleLogin login={login} loading={loading} />
               )
             ) : null}
           </AuthContext.Provider>

plugins/google-search-console/src/auth.ts

@@ -16,6 +16,7 @@ export function getLocalStorageTokens() {
 }
 
 export function useGoogleToken() {
+  const [loading, setLoading] = useState(false);
   const pollInterval = useRef<number>();
 
   const pollForTokens = (readKey: string) => {
@@ -58,29 +59,35 @@ export function useGoogleToken() {
   }, []);
 
   const login = async () => {
-    // Retrieve the authorization URL & set of unique read/write keys
-    const response = await fetch(
-      `${import.meta.env.VITE_OAUTH_API_DOMAIN}/authorize`,
-      {
-        method: 'POST',
-      },
-    );
-    if (response.status !== 200) return;
+    try {
+      setLoading(true)
 
-    const authorize = await response.json();
+      // Retrieve the authorization URL & set of unique read/write keys
+      const response = await fetch(
+        `${import.meta.env.VITE_OAUTH_API_DOMAIN}/authorize`,
+        {
+          method: 'POST',
+        },
+      );
+      if (response.status !== 200) return;
 
-    // Open up the provider's login window.
-    window.open(authorize.url);
+      const authorize = await response.json();
 
-    // While the user is logging in, poll the backend with the
-    // read key. On successful login, tokens will be returned.
-    const tokens = await pollForTokens(authorize.readKey);
+      // Open up the provider's login window.
+      window.open(authorize.url);
 
-    // Store tokens in local storage to keep the user logged in.
-    window.localStorage.setItem('tokens', JSON.stringify(tokens));
+      // While the user is logging in, poll the backend with the
+      // read key. On successful login, tokens will be returned.
+      const tokens = await pollForTokens(authorize.readKey);
 
-    // Update the component state.
-    setTokens(tokens as GoogleToken);
+      // Store tokens in local storage to keep the user logged in.
+      window.localStorage.setItem('tokens', JSON.stringify(tokens));
+
+      // Update the component state.
+      setTokens(tokens as GoogleToken);
+    } finally {
+      setLoading(false)
+    }
   };
 
   const refresh = useCallback(async (): Promise<GoogleToken | null> => {
@@ -129,5 +136,5 @@ export function useGoogleToken() {
     setTokens(null);
   };
 
-  return { isReady, login, refresh, tokens, logout };
+  return { isReady, login, refresh, tokens, logout, loading };
 }

plugins/google-search-console/src/screens/GoogleLogin.tsx

@@ -2,12 +2,14 @@ import bigG from '../images/[email protected]';
 
 interface GoogleLoginProps {
   login: () => void;
+  loading: boolean;
   hasError?: boolean;
   errorMessage?: string;
 }
 
 export default function GoogleLogin({
   login,
+  loading,
   hasError,
   errorMessage,
 }: GoogleLoginProps) {
@@ -26,7 +28,7 @@ export default function GoogleLogin({
         </div>
       </div>
       <button type="button" onClick={login}>
-        Log In
+        {loading ? "Loading..." : "Log In"}
       </button>
     </div>
   );