feat(ui): Add delayBeforeShow and instant appearance to WaveLoader vi…

…a CSSTransition (#3725)

* add delayBeforeShow to loader

* fix it and add docs

* simplify

weave-js/src/common/components/WandbLoader.tsx

@@ -113,8 +113,10 @@ export const TrackedWaveLoader = ({
   onComplete,
   onStart,
   size,
+  delayBeforeShow = 0,
 }: TrackedWandbLoaderProps & {
   size: 'small' | 'huge';
+  delayBeforeShow?: number;
 }) => {
   useLifecycleProfiling(
     name,
@@ -141,5 +143,5 @@ export const TrackedWaveLoader = ({
     onStart
   );
 
-  return <WaveLoader size={size} />;
+  return <WaveLoader size={size} delayBeforeShow={delayBeforeShow} />;
 };

weave-js/src/common/util/hooks.ts

@@ -271,3 +271,14 @@ export function useIsMounted() {
   }, []);
   return useCallback(() => isMountedRef.current, []);
 }
+
+export function useTimeout(ms: number) {
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setIsReady(true);
+    }, ms);
+    return () => clearTimeout(timeout);
+  }, [ms]);
+  return isReady;
+}

weave-js/src/components/Loaders/WaveLoader.tsx

@@ -1,3 +1,4 @@
+import {useTimeout} from '@wandb/weave/common/util/hooks';
 import {TailwindContents} from '@wandb/weave/components/Tailwind';
 import classNames from 'classnames';
 import React, {useMemo} from 'react';
@@ -22,11 +23,29 @@ const Dot = React.memo(
   }
 );
 
-export const WaveLoader = ({size}: {size: 'small' | 'huge'}) => {
+/**
+ * WaveLoader displays a row of Dot elements after an optional delay,
+ * instantly switching from completely hidden to visible.
+ *
+ * @param {Object} props
+ * @param {'small' | 'huge'} props.size - The size variant for each Dot.
+ * @param {number} [props.delayBeforeShow] - Time in ms to wait before showing the dots.
+ */
+export const WaveLoader = ({
+  size,
+  delayBeforeShow,
+}: {
+  size: 'small' | 'huge';
+  delayBeforeShow?: number;
+}) => {
+  const isReady = useTimeout(delayBeforeShow ?? 0);
   return (
     <TailwindContents>
       <div
-        className="flex items-center gap-x-4"
+        className={classNames(
+          'flex items-center gap-x-4',
+          isReady ? 'opacity-100' : 'opacity-0'
+        )}
         data-test={`wave-loader-${size}`}>
         <Dot size={size} />
         <Dot delay=".3s" size={size} />