diff --git a/src/components/MainList.test.tsx b/src/components/MainList.test.tsx index 11bb98a..90db6e8 100644 --- a/src/components/MainList.test.tsx +++ b/src/components/MainList.test.tsx @@ -27,6 +27,27 @@ describe('MainList', () => { expect(container).toMatchInlineSnapshot(`
+
+ +
+
+ +
+
+ +
@@ -39,17 +60,6 @@ describe('MainList', () => { /> Options - -
diff --git a/src/components/MainList.tsx b/src/components/MainList.tsx index 0b902f2..3a84e60 100644 --- 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 => { await browser.storage.sync.set({ apiKey: '' }); @@ -43,6 +47,12 @@ export default function MainList({ await changeExtensionState('trackingDisabled'); }; + const loading = isLoading ? ( +
+ +
+ ) : null; + return (
{user ? ( @@ -56,7 +66,9 @@ export default function MainList({
- ) : null} + ) : ( + loading + )} {loggingEnabled && user ? (
@@ -71,7 +83,9 @@ export default function MainList({

- ) : null} + ) : ( + loading + )} {!loggingEnabled && user ? (
@@ -86,21 +100,22 @@ export default function MainList({

- ) : null} + ) : ( + loading + )}
Options - {user ? ( + {isLoading ? null : user ? (
Logout
- ) : null} - {user ? null : ( + ) : ( { 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,