backported "Show loading state while fetching data in a new model page" (#46746)

* Show loading state while fetching data in a new model page (#46694)

* Show new model loading state while fetching

* Show new model loading state while fetching

* Add unit test

* Use `DelayedLoadingSpinner` instead

* Update the test

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Prettier

---------

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Fix the test

---------

Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>
Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.tsx

@@ -4,6 +4,7 @@ import { t } from "ttag";
 import _ from "underscore";
 
 import { useListDatabasesQuery } from "metabase/api";
+import { DelayedLoadingSpinner } from "metabase/common/components/EntityPicker/components/LoadingSpinner";
 import { Grid } from "metabase/components/Grid";
 import CS from "metabase/css/core/index.css";
 import Databases from "metabase/entities/databases";
@@ -29,7 +30,7 @@ interface NewModelOptionsProps {
 }
 
 const NewModelOptions = ({ location }: NewModelOptionsProps) => {
-  const { data } = useListDatabasesQuery();
+  const { data, isFetching } = useListDatabasesQuery();
   const databases = data?.data ?? [];
   const hasDataAccess = getHasDataAccess(databases);
   const hasNativeWrite = getHasNativeWrite(databases);
@@ -44,6 +45,10 @@ const NewModelOptions = ({ location }: NewModelOptionsProps) => {
 
   const showMetabaseLinks = useSelector(getShowMetabaseLinks);
 
+  if (isFetching) {
+    return <DelayedLoadingSpinner />;
+  }
+
   if (!hasDataAccess && !hasNativeWrite) {
     return (
       <div

frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx

+import fetchMock from "fetch-mock";
+
 import { screen } from "__support__/ui";
+import { delay } from "metabase/lib/promise";
 import { createMockDatabase } from "metabase-types/api/mocks";
 
 import { setup } from "./setup";
@@ -13,6 +16,25 @@ describe("NewModelOptions (OSS)", () => {
   });
 
   describe("has data access", () => {
+    it("should render loading indicator when fetching databases (metabase#44813)", async () => {
+      // Mocking the response needs to happen before the setup
+      // because setup already instantiates the component - it contains `renderWithProviders`.
+      fetchMock.get(
+        "path:/api/database",
+        delay(2000).then(() => {
+          return [createMockDatabase()];
+        }),
+        { overwriteRoutes: true },
+      );
+
+      setup({ databases: [createMockDatabase()] });
+
+      expect(await screen.findByTestId("loading-spinner")).toBeInTheDocument();
+      expect(
+        screen.queryByText("Metabase is no fun without any data"),
+      ).not.toBeInTheDocument();
+    });
+
     it("should render options for creating a model", async () => {
       setup({ databases: [createMockDatabase()] });