marlun78/react-lazy-component.html

## react-lazy-component.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React Lazy Component Demo</title>
</head>
<body>
  <div id="root">This is the React root</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js" integrity="sha512-m7nhpWHotpucPI37I4lPovL28Bm2BhAMV8poF3F8Z9oOEZ3jlxGzkgvG0EMt1mVL1xydr1erlBbmN90js/ssUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js" integrity="sha512-I5GJQRKGdj2miDs8ComgARfiAQiZJo/43YasH22qtweoG+YRXLTDYegxC/vPgw/ERxRzww/F4l4+8UiMmI20sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.20.6/babel.js" integrity="sha512-k99uQ0ucYP1eFec0sPTnIJ0vDmJOy274k7qCKCtGb2HkcaPTTjZooCqOIvEuSjKgpqDY78YIK7y+vKL7hrIwFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script type="text/babel" data-type="module">
    const {Component, Suspense, lazy} = React;
    const {createRoot} = ReactDOM;

    const HelloComponent = () => <div>Hello Component</div>;
    const GoodByeComponent = () => <div>GoodBye Component</div>;

    class ErrorBoundaryComponent extends Component {
      state = {
        error: null,
        hasError: false,
      };
      static getDerivedStateFromError(error) {
        return {
          error,
          hasError: true,
        };
      }
      render() {
        if (this.state.hasError) {
          return this.props.fallback;
        }
        return this.props.children;
      }
    }

    const LazyGoodByeComponent = lazy(() => new Promise((resolve, reject) => {
      // Mimic a module with default export
      const module = { default: GoodByeComponent };

      // Simple scheduling to wait for some condition
      const MAX_ATTEMPTS = 10;
      const INTERVAL = 250;
      let attempts = 0;
      const schedule = () => {
        console.log('> Schedule next run');
        setTimeout(run, INTERVAL);
      };
      const condition = () => attempts >= 5; // Set to 50 to test timeout
      const run = () => {
        attempts++;
        console.log('Run attempt:', attempts);
        if (condition()) {
          console.log('> Done!');
          return resolve(module);
        }
        if (attempts >= MAX_ATTEMPTS) {
          return reject(new Error('Timeout'));
        }
        console.log('> Not done yet');
        schedule();
      };

      run();
    }));

    const makeLazy = (Component, asyncAction) => {
      return lazy(() => new Promise((resolve, reject) => {
        asyncAction().then(() => resolve({ default: Component }), reject);
      }));
    };

    const LazyGoodByeComponent2 = makeLazy(GoodByeComponent, () => {
      return new Promise((resolve) => setTimeout(resolve, 3000));
    });

    const App = () => {
      return (
        <>
          <HelloComponent/>
          <ErrorBoundaryComponent fallback={"Timeout"}>
            <Suspense fallback={"Loading..."}>
              <LazyGoodByeComponent />
            </Suspense>
          </ErrorBoundaryComponent>

          <ErrorBoundaryComponent>
            <Suspense fallback={"Loading..."}>
              <LazyGoodByeComponent2 />
            </Suspense>
          </ErrorBoundaryComponent>
        </>
      );
    };

    createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>React Lazy Component Demo</title>
	</head>
	<body>
	<div id="root">This is the React root</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js" integrity="sha512-m7nhpWHotpucPI37I4lPovL28Bm2BhAMV8poF3F8Z9oOEZ3jlxGzkgvG0EMt1mVL1xydr1erlBbmN90js/ssUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js" integrity="sha512-I5GJQRKGdj2miDs8ComgARfiAQiZJo/43YasH22qtweoG+YRXLTDYegxC/vPgw/ERxRzww/F4l4+8UiMmI20sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.20.6/babel.js" integrity="sha512-k99uQ0ucYP1eFec0sPTnIJ0vDmJOy274k7qCKCtGb2HkcaPTTjZooCqOIvEuSjKgpqDY78YIK7y+vKL7hrIwFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script type="text/babel" data-type="module">
	const {Component, Suspense, lazy} = React;
	const {createRoot} = ReactDOM;

	const HelloComponent = () => <div>Hello Component</div>;
	const GoodByeComponent = () => <div>GoodBye Component</div>;

	class ErrorBoundaryComponent extends Component {
	state = {
	error: null,
	hasError: false,
	};
	static getDerivedStateFromError(error) {
	return {
	error,
	hasError: true,
	};
	}
	render() {
	if (this.state.hasError) {
	return this.props.fallback;
	}
	return this.props.children;
	}
	}

	const LazyGoodByeComponent = lazy(() => new Promise((resolve, reject) => {
	// Mimic a module with default export
	const module = { default: GoodByeComponent };

	// Simple scheduling to wait for some condition
	const MAX_ATTEMPTS = 10;
	const INTERVAL = 250;
	let attempts = 0;
	const schedule = () => {
	console.log('> Schedule next run');
	setTimeout(run, INTERVAL);
	};
	const condition = () => attempts >= 5; // Set to 50 to test timeout
	const run = () => {
	attempts++;
	console.log('Run attempt:', attempts);
	if (condition()) {
	console.log('> Done!');
	return resolve(module);
	}
	if (attempts >= MAX_ATTEMPTS) {
	return reject(new Error('Timeout'));
	}
	console.log('> Not done yet');
	schedule();
	};

	run();
	}));

	const makeLazy = (Component, asyncAction) => {
	return lazy(() => new Promise((resolve, reject) => {
	asyncAction().then(() => resolve({ default: Component }), reject);
	}));
	};

	const LazyGoodByeComponent2 = makeLazy(GoodByeComponent, () => {
	return new Promise((resolve) => setTimeout(resolve, 3000));
	});

	const App = () => {
	return (
	<>
	<HelloComponent/>
	<ErrorBoundaryComponent fallback={"Timeout"}>
	<Suspense fallback={"Loading..."}>
	<LazyGoodByeComponent />
	</Suspense>
	</ErrorBoundaryComponent>

	<ErrorBoundaryComponent>
	<Suspense fallback={"Loading..."}>
	<LazyGoodByeComponent2 />
	</Suspense>
	</ErrorBoundaryComponent>
	</>
	);
	};

	createRoot(document.getElementById('root')).render(<App />);
	</script>
	</body>
	</html>