From 6cb874052bae7509d683999a9133da1375f4f451 Mon Sep 17 00:00:00 2001
From: github-automation-metabase
 <166700802+github-automation-metabase@users.noreply.github.com>
Date: Wed, 14 Aug 2024 12:13:18 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20backported=20"Show=20loading=20s?=
 =?UTF-8?q?tate=20while=20fetching=20data=20in=20a=20new=20model=20page"?=
 =?UTF-8?q?=20(#46746)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../NewModelOptions/NewModelOptions.tsx       |  7 +++++-
 .../tests/common.unit.spec.tsx                | 22 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.tsx b/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.tsx
index c23ed0be4c7..bf9b6cdb5e0 100644
--- a/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.tsx
+++ b/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
diff --git a/frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx b/frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx
index 35ab0754a89..64ba105dfe1 100644
--- a/frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx
+++ b/frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx
@@ -1,4 +1,7 @@
+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()] });
 
-- 
GitLab