Fix sidebar and home loading indefinitely when database data fails to load (#38582)

frontend/src/metabase/home/components/HomeContent/HomeContent.tsx

@@ -22,11 +22,22 @@ export const HomeContent = (): JSX.Element | null => {
   const user = useSelector(getUser);
   const isAdmin = useSelector(getUserIsAdmin);
   const isXrayEnabled = useSelector(getIsXrayEnabled);
-  const { data: databases } = useDatabaseListQuery();
-  const { data: recentItems } = useRecentItemListQuery({ reload: true });
-  const { data: popularItems } = usePopularItemListQuery({ reload: true });
+  const { data: databases, isLoading: isDatabasesLoading } =
+    useDatabaseListQuery();
+  const { data: recentItems, isLoading: isRecentItemsLoading } =
+    useRecentItemListQuery({ reload: true });
+  const { data: popularItems, isLoading: isPopularItemsLoading } =
+    usePopularItemListQuery({ reload: true });
 
-  if (!user || isLoading(user, databases, recentItems, popularItems)) {
+  if (
+    !user ||
+    isLoading(
+      user,
+      isDatabasesLoading,
+      isRecentItemsLoading,
+      isPopularItemsLoading,
+    )
+  ) {
     return <LoadingAndErrorWrapper loading />;
   }
 
@@ -51,16 +62,16 @@ export const HomeContent = (): JSX.Element | null => {
 
 const isLoading = (
   user: User,
-  databases: Database[] | undefined,
-  recentItems: RecentItem[] | undefined,
-  popularItems: PopularItem[] | undefined,
+  isDatabasesLoading: boolean,
+  isRecentItemsLoading: boolean,
+  isPopularItemsLoading: boolean,
 ): boolean => {
   if (!user.has_question_and_dashboard) {
-    return databases == null;
+    return isDatabasesLoading;
   } else if (user.is_installer || !isWithinWeeks(user.first_login, 1)) {
-    return databases == null || recentItems == null;
+    return isDatabasesLoading || isRecentItemsLoading;
   } else {
-    return databases == null || recentItems == null || popularItems == null;
+    return isDatabasesLoading || isRecentItemsLoading || isPopularItemsLoading;
   }
 };
 

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarContainer.tsx

@@ -60,7 +60,7 @@ interface Props extends MainNavbarProps {
   rootCollection: Collection;
   hasDataAccess: boolean;
   hasOwnDatabase: boolean;
-  allFetched: boolean;
+  allLoading: boolean;
   logout: () => void;
   onReorderBookmarks: (bookmarks: Bookmark[]) => void;
   onChangeLocation: (location: LocationDescriptor) => void;
@@ -80,7 +80,7 @@ function MainNavbarContainer({
   collections = [],
   rootCollection,
   hasDataAccess,
-  allFetched,
+  allLoading,
   location,
   params,
   openNavbar,
@@ -153,7 +153,7 @@ function MainNavbarContainer({
     return null;
   }, [modal, closeModal, onChangeLocation]);
 
-  if (!allFetched) {
+  if (allLoading) {
     return <NavbarLoadingView />;
   }