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
-
-
- Login
-
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
+ )}