[dashboard] Still render in face of failing listTeams (#16941)

Author: geropl

components/dashboard/src/App.tsx

@@ -51,9 +51,11 @@ const App: FunctionComponent = () => {
     if (!user) {
         return <Login />;
     }
-    if (currentOrgQuery.isLoading) {
-        return <AppLoading />;
-    }
+    // TODO(gpl) "isLoading" is "true" even if there are errors in this "useCurrentOrg" call.
+    // Why don't understand as to why .isLoading is not resolved at some point, though. Maybe we're missing proper error handling for useOrganizations
+    // if (currentOrgQuery.isLoading) {
+    //     return <AppLoading />;
+    // }
 
     // If we made it here, we have a logged in user w/ their teams. Yay.
     return (

components/dashboard/src/data/organizations/orgs-query.ts

@@ -39,6 +39,11 @@ export function useOrganizations() {
         getQueryKey(user),
         async () => {
             console.log("Fetching orgs... " + JSON.stringify(getQueryKey(user)));
+            if (!user) {
+                console.log("useOrganizations with empty user");
+                return [];
+            }
+
             const response = await teamsService.listTeams({});
             const result: OrganizationInfo[] = [];
             for (const org of response.teams) {
@@ -64,6 +69,9 @@ export function useOrganizations() {
                 refreshUserBillingMode();
                 queryClient.invalidateQueries(getUserBillingModeQueryKey(user.id));
             },
+            onError: (err) => {
+                console.error("useOrganizations", err);
+            },
             enabled: !!user,
             cacheTime: 1000 * 60 * 60 * 1, // 1 hour
             staleTime: 1000 * 60 * 60 * 1, // 1 hour