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;

src/features/ui/containers/bundle-container.tsx

@@ -1,21 +1,3 @@
-import { connect } from 'react-redux';
-
-import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from 'soapbox/actions/bundles';
-
 import Bundle from '../components/bundle';
 
-import type { AppDispatch } from 'soapbox/store';
-
-const mapDispatchToProps = (dispatch: AppDispatch) => ({
-  onFetch() {
-    dispatch(fetchBundleRequest());
-  },
-  onFetchSuccess() {
-    dispatch(fetchBundleSuccess());
-  },
-  onFetchFail(error: any) {
-    dispatch(fetchBundleFail(error));
-  },
-});
-
-export default connect(null, mapDispatchToProps)(Bundle);
+export default Bundle;

src/features/ui/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import React, { lazy, useEffect, useRef } from 'react';
 import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom';
 
 import { fetchFollowRequests } from 'soapbox/actions/accounts';
@@ -354,7 +354,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/developers/timeline' developerOnly page={DefaultPage} component={TestTimeline} content={children} />
       <WrappedRoute path='/developers/sw' developerOnly page={DefaultPage} component={ServiceWorkerInfo} content={children} />
       <WrappedRoute path='/developers' page={DefaultPage} component={Developers} content={children} />
-      <WrappedRoute path='/error/network' developerOnly page={EmptyPage} component={() => new Promise((_resolve, reject) => reject())} content={children} />
+      <WrappedRoute path='/error/network' developerOnly page={EmptyPage} component={lazy(() => Promise.reject())} content={children} />
       <WrappedRoute path='/error' developerOnly page={EmptyPage} component={IntentionalError} content={children} />
 
       {hasCrypto && <WrappedRoute path='/donate/crypto' publicRoute page={DefaultPage} component={CryptoDonate} content={children} />}

src/features/ui/util/react-router-helpers.tsx

@@ -17,7 +17,7 @@ type PageProps = {
 };
 
 interface IWrappedRoute extends RouteProps {
-  component: (...args: any[]) => any;
+  component: React.LazyExoticComponent<any>;
   page?: React.ComponentType<PageProps>;
   content?: React.ReactNode;
   componentParams?: Record<string, any>;