show loading indicators while fetching current user in popup

wakatime · Oct 8, 2024 · 5a75c71 · 5a75c71
1 parent 949c1eb
commit 5a75c71
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 deletions.
diff --git a/src/components/MainList.test.tsx b/src/components/MainList.test.tsx
@@ -27,6 +27,27 @@ describe('MainList', () => {
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div>
+          <div
+            class="placeholder-glow"
+          >
+            <span
+              class="placeholder col-12"
+            />
+          </div>
+          <div
+            class="placeholder-glow"
+          >
+            <span
+              class="placeholder col-12"
+            />
+          </div>
+          <div
+            class="placeholder-glow"
+          >
+            <span
+              class="placeholder col-12"
+            />
+          </div>
           <div
             class="list-group"
           >
@@ -39,17 +60,6 @@ describe('MainList', () => {
               />
               Options
             </a>
-            <a
-              class="list-group-item text-body-secondary"
-              href="https://wakatime.com/login"
-              rel="noreferrer"
-              target="_blank"
-            >
-              <i
-                class="fa fa-fw fa-sign-in me-2"
-              />
-              Login
-            </a>
           </div>
         </div>
       </div>

diff --git a/src/components/MainList.tsx b/src/components/MainList.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+
+import React from 'react';
 import { configLogout, setLoggingEnabled } from '../reducers/configReducer';
 import { userLogout } from '../reducers/currentUser';
 import { ReduxSelector } from '../types/store';
@@ -23,6 +24,9 @@ export default function MainList({
   const user: User | undefined = useSelector(
     (selector: ReduxSelector) => selector.currentUser.user,
   );
+  const isLoading: boolean = useSelector(
+    (selector: ReduxSelector) => selector.currentUser.pending ?? true,
+  );
 
   const logoutUser = async (): Promise<void> => {
     await browser.storage.sync.set({ apiKey: '' });
@@ -43,6 +47,12 @@ export default function MainList({
     await changeExtensionState('trackingDisabled');
   };
 
+  const loading = isLoading ? (
+    <div className="placeholder-glow">
+      <span className="placeholder col-12"></span>
+    </div>
+  ) : null;
+
   return (
     <div>
       {user ? (
@@ -56,7 +66,9 @@ export default function MainList({
             </blockquote>
           </div>
         </div>
-      ) : null}
+      ) : (
+        loading
+      )}
       {loggingEnabled && user ? (
         <div className="row">
           <div className="col-xs-12">
@@ -71,7 +83,9 @@ export default function MainList({
             </p>
           </div>
         </div>
-      ) : null}
+      ) : (
+        loading
+      )}
       {!loggingEnabled && user ? (
         <div className="row">
           <div className="col-xs-12">
@@ -86,21 +100,22 @@ export default function MainList({
             </p>
           </div>
         </div>
-      ) : null}
+      ) : (
+        loading
+      )}
       <div className="list-group">
         <a href="#" className="list-group-item text-body-secondary" onClick={openOptionsPage}>
           <i className="fa fa-fw fa-cogs me-2" />
           Options
         </a>
-        {user ? (
+        {isLoading ? null : user ? (
           <div>
             <a href="#" className="list-group-item text-body-secondary" onClick={logoutUser}>
               <i className="fa fa-fw fa-sign-out me-2" />
               Logout
             </a>
           </div>
-        ) : null}
-        {user ? null : (
+        ) : (
           <a
             target="_blank"
             rel="noreferrer"

diff --git a/src/reducers/currentUser.ts b/src/reducers/currentUser.ts
@@ -36,10 +36,12 @@ const currentUser = createSlice({
   extraReducers: (builder) => {
     builder.addCase(fetchCurrentUser.fulfilled, (state, { payload }) => {
       state.user = payload;
+      state.pending = false;
     });
     builder.addCase(fetchCurrentUser.rejected, (state, { error }) => {
       state.user = undefined;
       state.error = error;
+      state.pending = false;
     });
   },
   initialState,