Bundle: just wrap it with React.Suspense

src/features/ui/components/bundle.tsx

@@ -1,114 +1,23 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
-const emptyComponent = () => null;
-const noop = () => { };
-
-export interface BundleProps {
-  fetchComponent: () => Promise<any>;
-  loading: React.ComponentType;
-  error: React.ComponentType<{ onRetry: (props?: BundleProps) => void }>;
-  children: (mod: any) => React.ReactNode;
+export interface IBundle<T extends React.ComponentType<any>> {
+  fetchComponent: React.LazyExoticComponent<T>;
+  loading?: React.ComponentType;
+  error?: React.ComponentType<{ onRetry: (props?: IBundle<T>) => void }>;
+  children: (component: React.LazyExoticComponent<T>) => React.ReactNode;
   renderDelay?: number;
-  onFetch: () => void;
-  onFetchSuccess: () => void;
-  onFetchFail: (error: any) => void;
-}
-
-interface BundleState {
-  mod: any;
-  forceRender: boolean;
+  onFetch?: () => void;
+  onFetchSuccess?: () => void;
+  onFetchFail?: (error: any) => void;
 }
 
 /** Fetches and renders an async component. */
-class Bundle extends React.PureComponent<BundleProps, BundleState> {
-
-  timeout: NodeJS.Timeout | undefined;
-  timestamp: Date | undefined;
-
-  static defaultProps = {
-    loading: emptyComponent,
-    error: emptyComponent,
-    renderDelay: 0,
-    onFetch: noop,
-    onFetchSuccess: noop,
-    onFetchFail: noop,
-  };
-
-  static cache = new Map;
-
-  state = {
-    mod: undefined,
-    forceRender: false,
-  };
-
-  componentDidMount() {
-    this.load(this.props);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: BundleProps) {
-    if (nextProps.fetchComponent !== this.props.fetchComponent) {
-      this.load(nextProps);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-  }
-
-  load = (props?: BundleProps) => {
-    const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
-    const cachedMod = Bundle.cache.get(fetchComponent);
-
-    if (fetchComponent === undefined) {
-      this.setState({ mod: null });
-      return Promise.resolve();
-    }
-
-    onFetch();
-
-    if (cachedMod) {
-      this.setState({ mod: cachedMod.default });
-      onFetchSuccess();
-      return Promise.resolve();
-    }
-
-    this.setState({ mod: undefined });
-
-    if (renderDelay !== 0) {
-      this.timestamp = new Date();
-      this.timeout = setTimeout(() => this.setState({ forceRender: true }), renderDelay);
-    }
-
-    return fetchComponent()
-      .then((mod) => {
-        Bundle.cache.set(fetchComponent, mod);
-        this.setState({ mod: mod.default });
-        onFetchSuccess();
-      })
-      .catch((error) => {
-        this.setState({ mod: null });
-        onFetchFail(error);
-      });
-  };
-
-  render() {
-    const { loading: Loading, error: Error, children, renderDelay } = this.props;
-    const { mod, forceRender } = this.state;
-    const elapsed = this.timestamp ? ((new Date()).getTime() - this.timestamp.getTime()) : renderDelay!;
-
-    if (mod === undefined) {
-      return (elapsed >= renderDelay! || forceRender) ? <Loading /> : null;
-    }
-
-    if (mod === null) {
-      return <Error onRetry={this.load} />;
-    }
-
-    return children(mod);
-  }
-
+function Bundle<T extends React.ComponentType<any>>({ fetchComponent, loading: Loading, children }: IBundle<T>) {
+  return (
+    <Suspense fallback={Loading ? <Loading /> : null}>
+      {children(fetchComponent)}
+    </Suspense>
+  );
 }
 
 export default Bundle;