fix: In delayed error/loading wrapper, on error, display the error (#46395)

frontend/src/metabase/components/LoadingAndErrorWrapper/DelayedLoadingAndErrorWrapper.tsx

 import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
 
-import { Transition } from "metabase/ui";
-
 import LoadingAndErrorWrapper from "./LoadingAndErrorWrapper";
 
 export type LoadingAndErrorWrapperProps = {
@@ -49,29 +47,27 @@ export const DelayedLoadingAndErrorWrapper = ({
     return () => clearTimeout(timeout);
   }, [delay]);
 
-  if (!loading && !error) {
-    return <>{children}</>;
+  // Handle error condition
+  if (error) {
+    return <LoadingAndErrorWrapper error={error} {...props} />;
   }
-  if (!showWrapper) {
-    // make tests aware that things are loading
-    return <span data-testid="loading-indicator" />;
+
+  // Handle loading condition
+  if (loading) {
+    if (!showWrapper) {
+      // Don't show the wrapper yet, but make tests aware that things are loading
+      return <span data-testid="loading-indicator" />;
+    }
+    if (loader) {
+      return loader;
+    }
+    return (
+      <LoadingAndErrorWrapper error={error} loading={loading} {...props}>
+        {children}
+      </LoadingAndErrorWrapper>
+    );
   }
-  return (
-    <Transition
-      mounted={!!(error || loading)}
-      transition="fade"
-      duration={200}
-      timingFunction="ease"
-    >
-      {styles => (
-        <div style={styles}>
-          {loader ?? (
-            <LoadingAndErrorWrapper error={error} loading={loading} {...props}>
-              {children}
-            </LoadingAndErrorWrapper>
-          )}
-        </div>
-      )}
-    </Transition>
-  );
+
+  // Happy path
+  return <>{children}</>;
 };

frontend/src/metabase/components/LoadingAndErrorWrapper/DelayedLoadingAndErrorWrapper.unit.spec.tsx

+import { render, screen } from "__support__/ui";
+
+import { DelayedLoadingAndErrorWrapper } from "./DelayedLoadingAndErrorWrapper";
+
+describe("DelayedLoadingAndErrorWrapper", () => {
+  describe("Loading", () => {
+    it("should display a loading message if given a true loading prop", () => {
+      render(<DelayedLoadingAndErrorWrapper error={false} loading={true} />);
+
+      expect(screen.getByTestId("loading-indicator")).toBeInTheDocument();
+    });
+    it("should display a delayed loader if given a true loading prop", async () => {
+      render(
+        <DelayedLoadingAndErrorWrapper
+          loader={<div data-testid="loader"></div>}
+          delay={100}
+          error={false}
+          loading={true}
+        />,
+      );
+
+      expect(screen.getByTestId("loading-indicator")).toBeInTheDocument();
+      await screen.findByTestId("loader", undefined, { timeout: 150 });
+    });
+
+    it("should display a given child if loading is false", () => {
+      render(
+        <DelayedLoadingAndErrorWrapper loading={false} error={null}>
+          <div>Hey</div>
+        </DelayedLoadingAndErrorWrapper>,
+      );
+      expect(screen.getByText("Hey")).toBeInTheDocument();
+    });
+
+    it("shouldn't fail if loaded with null children and no wrapper", () => {
+      expect(() =>
+        render(
+          <DelayedLoadingAndErrorWrapper
+            error={false}
+            loading={false}
+            noWrapper
+          />,
+        ),
+      ).not.toThrow();
+    });
+  });
+
+  describe("Errors", () => {
+    it("should display an error message if given an error object and loading is true", () => {
+      const error = {
+        type: 500,
+        message: "Big error here folks",
+      };
+
+      render(<DelayedLoadingAndErrorWrapper loading={true} error={error} />);
+      expect(screen.getByText(error.message)).toBeInTheDocument();
+    });
+  });
+});