UI: Drop the loading spinner for base React plugins

airflow-core/src/airflow/ui/src/pages/ReactPlugin.test.tsx

@@ -189,3 +189,20 @@ describe("loadPlugin", () => {
     expect(component).not.toBe(componentA);
   });
 });
+
+const loading = (destination: ReactAppResponse["destination"]) =>
+  ({ bundle_url: "http://localhost/never-loaded.js", destination, name: "Unloaded" }) as ReactAppResponse;
+
+describe("ReactPlugin loading fallback", () => {
+  it("shows a spinner while a page plugin's bundle loads", () => {
+    const { container } = render(<ReactPlugin reactApp={loading("dag")} />, { wrapper: Wrapper });
+
+    expect(container.querySelector(".chakra-spinner")).toBeInTheDocument();
+  });
+
+  it("shows nothing while a base plugin's bundle loads", () => {
+    const { container } = render(<ReactPlugin reactApp={loading("base")} />, { wrapper: Wrapper });
+
+    expect(container.querySelector(".chakra-spinner")).not.toBeInTheDocument();
+  });
+});

airflow-core/src/airflow/ui/src/pages/ReactPlugin.tsx

@@ -150,9 +150,11 @@ export const ReactPlugin = ({ reactApp }: { readonly reactApp: ReactAppResponse
   // Otherwise, lazy-load the bundle once. When it resolves, it must set a function component
   // under globalThis[reactApp.name], which we then use as the default export.
   const LazyPlugin = lazy(() => loadPlugin(reactApp));
+  // A base plugin sits above every page, so a spinner there shows on every full page load.
+  const fallback = reactApp.destination === "base" ? null : <Spinner />;
 
   return (
-    <Suspense fallback={<Spinner />}>
+    <Suspense fallback={fallback}>
       <LazyPlugin {...pluginProps} />
     </Suspense>
   );