Use DelayedLoadingAndErrorWrapper component in Admin > Performance (#41103)

frontend/src/metabase/admin/performance/components/StrategyEditorForDatabases.tsx

@@ -4,7 +4,7 @@ import { withRouter } from "react-router";
 import { t } from "ttag";
 import { findWhere, pick } from "underscore";
 
-import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { DelayedLoadingAndErrorWrapper } from "metabase/components/LoadingAndErrorWrapper/DelayedLoadingAndErrorWrapper";
 import useBeforeUnload from "metabase/hooks/use-before-unload";
 import { useConfirmation } from "metabase/hooks/use-confirmation";
 import { PLUGIN_CACHING } from "metabase/plugins";
@@ -15,7 +15,6 @@ import { DurationUnit } from "metabase-types/api";
 
 import { useCacheConfigs } from "../hooks/useCacheConfigs";
 import { useConfirmOnRouteLeave } from "../hooks/useConfirmOnRouteLeave";
-import { useDelayedLoadingSpinner } from "../hooks/useDelayedLoadingSpinner";
 import { useVerticallyOverflows } from "../hooks/useVerticallyOverflows";
 import type { UpdateTargetId } from "../strategies";
 import { getFieldsForStrategyType, rootId, Strategies } from "../strategies";
@@ -150,12 +149,8 @@ const StrategyEditorForDatabases_Base = ({
     ref: formPanelRef,
   } = useVerticallyOverflows();
 
-  const showSpinner = useDelayedLoadingSpinner();
-
   if (error || loading) {
-    return showSpinner ? (
-      <LoadingAndErrorWrapper error={error} loading={loading} />
-    ) : null;
+    return <DelayedLoadingAndErrorWrapper error={error} loading={loading} />;
   }
 
   return (

frontend/src/metabase/admin/performance/hooks/useDelayedLoadingSpinner.tsx

-import { useEffect, useState } from "react";
-
-/**
- * A loading spinner that doesn't appear right away but waits a bit first
- * @see https://metaboat.slack.com/archives/C02H619CJ8K/p1709558533499399
- */
-export const useDelayedLoadingSpinner = (delay = 300) => {
-  const [showLoadingSpinner, setShowLoadingSpinner] = useState(false);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setShowLoadingSpinner(true);
-    }, delay);
-    return () => clearTimeout(timeout);
-  }, [delay]);
-
-  return showLoadingSpinner;
-};

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

+import { useEffect, useState } from "react";
+
+import { Transition } from "metabase/ui";
+
+import LoadingAndErrorWrapper from "./LoadingAndErrorWrapper";
+
+/**
+ * A loading/error display component that waits a bit before appearing
+ * @see https://metaboat.slack.com/archives/C02H619CJ8K/p1709558533499399
+ */
+export const DelayedLoadingAndErrorWrapper = ({
+  error,
+  loading,
+  delay = 300,
+}: {
+  error: unknown;
+  loading: boolean;
+  delay?: number;
+}) => {
+  const [showWrapper, setShowWrapper] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShowWrapper(true);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [delay]);
+
+  if (!showWrapper) {
+    return null;
+  }
+  return (
+    <Transition
+      mounted={!!(error || loading)}
+      transition="fade"
+      duration={200}
+      timingFunction="ease"
+    >
+      {styles => (
+        <div style={styles}>
+          <LoadingAndErrorWrapper error={error} loading={loading} />
+        </div>
+      )}
+    </Transition>
+  );
+};