ref: defer showing the fallback for lazy-loaded files

static/app/components/lazyLoad.spec.tsx

@@ -1,6 +1,6 @@
 import {lazy} from 'react';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import LazyLoad from 'sentry/components/lazyLoad';
 
@@ -19,17 +19,22 @@ function BarComponent() {
 type ResolvedComponent = {default: React.ComponentType<TestProps>};
 
 describe('LazyLoad', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
   afterEach(() => {
     jest.restoreAllMocks();
+    jest.useRealTimers();
   });
 
-  it('renders with a loading indicator when promise is not resolved yet', () => {
+  it('renders with a loading indicator when promise is not resolved yet', async () => {
     const importTest = new Promise<ResolvedComponent>(() => {});
     const getComponent = () => importTest;
     render(<LazyLoad LazyComponent={lazy(getComponent)} />);
 
-    // Should be loading
-    expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    });
   });
 
   it('renders when given a promise of a "foo" component', async () => {
@@ -41,7 +46,9 @@ describe('LazyLoad', () => {
     render(<LazyLoad LazyComponent={lazy(() => importFoo)} />);
 
     // Should be loading
-    expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    });
 
     // resolve with foo
     doResolve!({default: FooComponent});
@@ -72,7 +79,9 @@ describe('LazyLoad', () => {
 
     // First render Foo
     const {rerender} = render(<LazyLoad LazyComponent={lazy(() => importFoo)} />);
-    expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    });
 
     // resolve with foo
     doResolve!({default: FooComponent});

static/app/components/lazyLoad.tsx

@@ -1,5 +1,4 @@
-import type {ErrorInfo} from 'react';
-import {Component, Suspense} from 'react';
+import {Component, Suspense, useEffect, useState, type ErrorInfo} from 'react';
 import * as Sentry from '@sentry/react';
 
 import {Container, Flex} from 'sentry/components/core/layout';
@@ -23,6 +22,26 @@ type Props<C extends React.LazyExoticComponent<C>> = React.ComponentProps<C> & {
   loadingFallback?: React.ReactNode | undefined;
 };
 
+function DeferredLoader({
+  children,
+  fallback = null,
+}: {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}) {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoaded(true);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return loaded ? children : fallback;
+}
+
 /**
  * LazyLoad is used to dynamically load codesplit components via a `import`
  * call. This is primarily used in our routing tree.
@@ -43,7 +62,9 @@ function LazyLoad<C extends React.LazyExoticComponent<any>>({
         fallback={
           loadingFallback ?? (
             <Flex flex="1" align="center" column="1 / -1">
-              <LoadingIndicator />
+              <DeferredLoader fallback={<LoadingIndicator style={{display: 'none'}} />}>
+                <LoadingIndicator />
+              </DeferredLoader>
             </Flex>
           )
         }