feat: add delayLoading

Author: 2heal1

packages/bridge/bridge-react/src/lazy/AwaitDataFetch.tsx

@@ -1,4 +1,10 @@
-import React, { MutableRefObject, ReactNode, Suspense, useRef } from 'react';
+import React, {
+  MutableRefObject,
+  ReactNode,
+  Suspense,
+  useRef,
+  useState,
+} from 'react';
 import logger from './logger';
 import {
   DATA_FETCH_ERROR_PREFIX,
@@ -63,6 +69,7 @@ export const transformError = (err: string | Error): ErrorInfo => {
 export interface AwaitProps<T> {
   resolve: T | Promise<T>;
   loading?: ReactNode;
+  delayLoading?: number;
   errorElement?: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
   children: (data: T) => ReactNode;
   params?: DataFetchParams;
@@ -82,6 +89,7 @@ export function AwaitDataFetch<T>({
   errorElement = DefaultErrorElement,
   children,
   params,
+  delayLoading,
 }: AwaitProps<T>) {
   const dataRef = useRef<T>();
   const data = dataRef.current || resolve;
@@ -92,22 +100,52 @@ export function AwaitDataFetch<T>({
       params={params}
       loading={loading}
       errorElement={errorElement}
-      // @ts-ignore
+      delayLoading={delayLoading}
+      // @ts-expect-error
       resolve={getData}
     >
       {children}
     </AwaitSuspense>
   );
 }
 
+export const DelayedLoading = ({
+  delayLoading,
+  children,
+}: {
+  delayLoading?: number;
+  children: ReactNode;
+}) => {
+  const [show, setShow] = useState(false);
+  const timerSet = useRef(false);
+
+  if (!delayLoading) {
+    return children;
+  }
+
+  if (typeof window !== 'undefined' && !show && !timerSet.current) {
+    timerSet.current = true;
+    setTimeout(() => {
+      setShow(true);
+    }, delayLoading);
+  }
+
+  return show ? children : null;
+};
+
 function AwaitSuspense<T>({
   resolve,
   children,
   loading = DefaultLoading,
   errorElement = DefaultErrorElement,
+  delayLoading,
 }: AwaitErrorHandlerProps<T>) {
   return (
-    <Suspense fallback={loading}>
+    <Suspense
+      fallback={
+        <DelayedLoading delayLoading={delayLoading}>{loading}</DelayedLoading>
+      }
+    >
       <ResolveAwait resolve={resolve} errorElement={errorElement}>
         {children}
       </ResolveAwait>
@@ -132,6 +170,7 @@ function ResolveAwait<T>({
             {globalThis.FEDERATION_SSR && (
               <script
                 suppressHydrationWarning
+                // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{
                   __html: String.raw`
                   globalThis['${DATA_FETCH_FUNCTION}'] = globalThis['${DATA_FETCH_FUNCTION}']  || []

packages/bridge/bridge-react/src/lazy/createLazyComponent.tsx

@@ -1,6 +1,10 @@
 import React, { ReactNode, useState, useEffect } from 'react';
 import logger from './logger';
-import { AwaitDataFetch, transformError } from './AwaitDataFetch';
+import {
+  AwaitDataFetch,
+  DelayedLoading,
+  transformError,
+} from './AwaitDataFetch';
 import {
   fetchData,
   getDataFetchItem,
@@ -9,6 +13,7 @@ import {
   getLoadedRemoteInfos,
   setDataFetchItemLoadedStatus,
   wrapDataFetchId,
+  isServerEnv,
 } from './utils';
 import {
   DATA_FETCH_ERROR_PREFIX,
@@ -33,6 +38,7 @@ export type CreateLazyComponentOptions<T, E extends keyof T> = {
   loader: () => Promise<T>;
   instance: ReturnType<typeof getInstance>;
   loading: React.ReactNode;
+  delayLoading?: number;
   fallback: ReactNode | ((errorInfo: ErrorInfo) => ReactNode);
   export?: E;
   dataFetchParams?: DataFetchParams;
@@ -313,13 +319,13 @@ export function createLazyComponent<T, E extends keyof T>(
           </>
         ),
       };
+      // eslint-disable-next-line max-lines
     } else {
       throw Error(
         `Make sure that ${moduleId} has the correct export when export is ${String(
           exportName,
         )}`,
       );
-      // eslint-disable-next-line max-lines
     }
   });
 
@@ -334,6 +340,7 @@ export function createLazyComponent<T, E extends keyof T>(
         <AwaitDataFetch
           resolve={getData(options.noSSR)}
           loading={options.loading}
+          delayLoading={options.delayLoading}
           errorElement={options.fallback}
         >
           {/* @ts-expect-error ignore */}
@@ -374,7 +381,11 @@ export function createLazyComponent<T, E extends keyof T>(
       }, []);
 
       if (loading) {
-        return <>{options.loading}</>;
+        return (
+          <DelayedLoading delayLoading={options.delayLoading}>
+            {options.loading}
+          </DelayedLoading>
+        );
       }
 
       if (error) {