Skip to content

Instantly share code, notes, and snippets.

@ThaddeusJiang
Created November 6, 2018 07:21
Show Gist options
  • Save ThaddeusJiang/bb0301c366cadbfc720c54fc9ae52d81 to your computer and use it in GitHub Desktop.
Save ThaddeusJiang/bb0301c366cadbfc720c54fc9ae52d81 to your computer and use it in GitHub Desktop.
code split with lazy and suspense form react 16.6

https://github.com/zenportinc/web-app/commit/94806531490778a14bb5b82e9527d1f76c9dfdc0#diff-cdd62d819aee41a0d5582e5ce574dba3L2

- import Loadable from 'react-loadable';
+ // $FlowFixMe: it is open issue on flow repo https://github.com/facebook/flow/issues/7093
+ import React, { lazy, Suspense } from 'react';

- const AsyncItemsSection = Loadable({
-   loading: () => <LoadingIcon />,
-   loader: () => import('./components/ItemsSection'),
- });

+ const AsyncItemsSection = lazy(() => import('./components/ItemsSection'));

+ <Suspense fallback={<LoadingIcon />}>
+   <AsyncItemsSection />
+ </Suspense>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment