Show Loading state while checking dashboard redirect (#37089)

* Show Loading state while checking dashboard redirect

* adding e2e test

e2e/test/scenarios/onboarding/home/homepage.cy.spec.js

@@ -289,6 +289,32 @@ describe("scenarios > home > custom homepage", () => {
       });
     });
 
+    it("should not flash the homescreen before redirecting (#37089)", () => {
+      cy.intercept(
+        {
+          url: `/api/dashboard/${ORDERS_DASHBOARD_ID}`,
+          method: "GET",
+          middleware: true,
+        },
+        req => {
+          req.continue(res => {
+            res.delay = 1000;
+            res.send();
+          });
+        },
+      );
+
+      cy.visit("/");
+      cy.findByRole("heading", { name: "Loading..." }).should("exist");
+      cy.findByRole("heading", { name: "Loading...", timeout: 5000 }).should(
+        "not.exist",
+      );
+
+      //Ensure that when the loading header is gone, we are no longer on the home page
+      cy.findByTestId("home-page", { timeout: 0 }).should("not.exist");
+      cy.url().should("include", "/dashboard/");
+    });
+
     it("should redirect you if you do not have permissions for set dashboard", () => {
       cy.signIn("nocollection");
       cy.visit("/");

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

@@ -27,13 +27,22 @@ import { HomeContent } from "../HomeContent";
 const SEARCH_QUERY = { models: "dataset", limit: 1 } as const;
 
 export const HomePage = (): JSX.Element => {
-  const { databases, models, isMetabotEnabled, isLoading, error } =
-    useMetabot();
+  const {
+    databases,
+    models,
+    isMetabotEnabled,
+    isLoading: isLoadingMetabot,
+    error,
+  } = useMetabot();
   useNavbar();
-  useDashboardPage();
+  const { isLoadingDash } = useDashboardPage();
+
+  if ((isLoadingMetabot || error) && isMetabotEnabled) {
+    return <LoadingAndErrorWrapper loading={isLoadingMetabot} error={error} />;
+  }
 
-  if ((isLoading || error) && isMetabotEnabled) {
-    return <LoadingAndErrorWrapper loading={isLoading} error={error} />;
+  if (isLoadingDash) {
+    return <LoadingAndErrorWrapper loading={isLoadingDash} error={error} />;
   }
 
   return (
@@ -128,4 +137,8 @@ const useDashboardPage = () => {
     isLoadingDash,
     dashboard?.archived,
   ]);
+
+  return {
+    isLoadingDash: isLoadingDash || isLoadingSettings,
+  };
 };