From ed9874f4d0b327a09aaed28717d98be787f0ebf6 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 5 Mar 2024 19:10:31 +0000
Subject: extension: Fix the infinite loading of the options page

---
 packages/browser-extension/src/NotConfiguredPage.tsx |  1 -
 packages/browser-extension/src/OptionsPage.tsx       | 19 +++++++++----------
 packages/browser-extension/src/utils/providers.tsx   |  6 +++++-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/browser-extension/src/NotConfiguredPage.tsx b/packages/browser-extension/src/NotConfiguredPage.tsx
index f7a11106..fc5c8f47 100644
--- a/packages/browser-extension/src/NotConfiguredPage.tsx
+++ b/packages/browser-extension/src/NotConfiguredPage.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import usePluginSettings from "./utils/settings";
-import { PackageOpen } from "lucide-react";
 import Logo from "./Logo";
 
 export default function NotConfiguredPage() {
diff --git a/packages/browser-extension/src/OptionsPage.tsx b/packages/browser-extension/src/OptionsPage.tsx
index 74b2067e..913b69ab 100644
--- a/packages/browser-extension/src/OptionsPage.tsx
+++ b/packages/browser-extension/src/OptionsPage.tsx
@@ -9,11 +9,12 @@ export default function OptionsPage() {
   const navigate = useNavigate();
   const { settings, setSettings } = usePluginSettings();
 
-  const {
-    data: whoami,
-    isPending: isWhoAmiPending,
-    error: whoAmIError,
-  } = api.users.whoami.useQuery();
+  const { data: whoami, error: whoAmIError } = api.users.whoami.useQuery(
+    undefined,
+    {
+      enabled: settings.address != "",
+    },
+  );
 
   const invalidateWhoami = api.useUtils().users.whoami.refetch;
 
@@ -30,12 +31,10 @@ export default function OptionsPage() {
         <span>Something went wrong: {whoAmIError.message}</span>
       );
     }
-  }
-  if (isWhoAmiPending) {
-    loggedInMessage = <Spinner />;
-  }
-  if (whoami) {
+  } else if (whoami) {
     loggedInMessage = <span>{whoami.name}</span>;
+  } else {
+    loggedInMessage = <Spinner />;
   }
 
   const onLogout = () => {
diff --git a/packages/browser-extension/src/utils/providers.tsx b/packages/browser-extension/src/utils/providers.tsx
index d21714b6..d20f2512 100644
--- a/packages/browser-extension/src/utils/providers.tsx
+++ b/packages/browser-extension/src/utils/providers.tsx
@@ -35,7 +35,11 @@ export function Providers({ children }: { children: React.ReactNode }) {
   }, [settings.address]);
 
   return (
-    <api.Provider client={trpcClient} queryClient={queryClient}>
+    <api.Provider
+      key={settings.address}
+      client={trpcClient}
+      queryClient={queryClient}
+    >
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </api.Provider>
   );
-- 
cgit v1.2.3-70-g09d2