Don't display spinners next to schema in query database selector (#32394)

frontend/src/metabase/query_builder/components/DataSelector/DataSelectorDatabaseSchemaPicker/DataSelectorDatabaseSchemaPicker.tsx

@@ -92,7 +92,7 @@ const DataSelectorDatabaseSchemaPicker = ({
     return true;
   };
 
-  const showSpinner = ({ active }: { active?: boolean }) => !active;
+  const showSpinner = ({ active }: { active?: boolean }) => active === false;
 
   const renderSectionIcon = ({ icon }: { icon?: IconName }) =>
     icon && <Icon className="Icon text-default" name={icon} size={18} />;

frontend/src/metabase/query_builder/components/DataSelector/DataSelectorDatabaseSchemaPicker/DataSelectorDatabaseSchemaPicker.unit.spec.js

-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 
+import { checkNotNull } from "metabase/core/utils/types";
+import { getMetadata } from "metabase/selectors/metadata";
+import { createMockDatabase, createMockSchema } from "metabase-types/api/mocks";
+import { createMockState } from "metabase-types/store/mocks";
+import { createMockEntitiesState } from "__support__/store";
+import { renderWithProviders, screen } from "__support__/ui";
 import DataSelectorDatabaseSchemaPicker from "./DataSelectorDatabaseSchemaPicker";
 
+const setup = opts => {
+  const state = createMockState({
+    entities: createMockEntitiesState({ databases: [opts.database] }),
+  });
+  const metadata = getMetadata(state);
+  const database = checkNotNull(metadata.database(opts.database.id));
+  const schemas = database.getSchemas();
+
+  renderWithProviders(
+    <DataSelectorDatabaseSchemaPicker
+      selectedDatabase={database}
+      selectedSchema={schemas[0]}
+      databases={[database]}
+      schemas={schemas}
+      onChangeSchema={jest.fn()}
+      onChangeDatabase={jest.fn()}
+    />,
+    { storeInitialState: state },
+  );
+};
+
 describe("DataSelectorDatabaseSchemaPicker", () => {
   it("displays loading message when it has no databases", () => {
     render(<DataSelectorDatabaseSchemaPicker databases={[]} />);
@@ -62,4 +89,19 @@ describe("DataSelectorDatabaseSchemaPicker", () => {
       expect(screen.getByText("Saved Questions")).toBeInTheDocument();
     });
   });
+
+  it("doesn't display a loading spinner next to a schema when the database has initial_sync_status='incomplete'", () => {
+    const database = createMockDatabase({
+      initial_sync_status: "incomplete",
+      schemas: [
+        createMockSchema({ id: 1, name: "Schema 1" }),
+        createMockSchema({ id: 2, name: "Schema 2" }),
+      ],
+    });
+    setup({ database });
+    // There should only be one loading-spinner next to the database name, and not the schema names
+    expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
+    expect(screen.getByText("Schema 1")).toBeInTheDocument();
+    expect(screen.getByText("Schema 2")).toBeInTheDocument();
+  });
 });