How to use react-async-component - 10 common examples

import React, { useRef } from "react";

import Layout from "../layouts";

import { FullWidthContainer } from "../components/generic";
import { asyncComponent } from "react-async-component";
import birdseyeTheme from "../styled/theme/birdseyeTheme";
import { styled } from "../styled";
import Tooltip from "../components/Tooltip";
import schema from "graphql-birdseye-core/src/graphql/referenceSchema.new";

//async component for gatsby production build
const GraphqlBirdseye = asyncComponent({
  resolve: () => require("graphql-birdseye"),
  LoadingComponent: () =&gt; <div>, // Optional
  ErrorComponent: () =&gt; <div>Uh oh..</div>, // Optional
});

const HomePage = () =&gt; {
  const birdsEyeRef = useRef(null);

  return (
    
      <div>
        
          {schema &amp;&amp; (</div></div>

import Layout from "../layouts";

import { FullWidthContainer, Caption } from "../components/generic";
import { asyncComponent } from "react-async-component";
import { IntrospectionQuery } from "../utils/introspectionQuery";
import SchemaForm from "../components/schemaForm";
import birdseyeTheme from "../styled/theme/birdseyeTheme";
import { styled } from "../styled";
import { Button } from "../components/Buttons";
import GetStarted from "../components/GetStarted";
import { scrollToRef } from "../utils";
import Tooltip from "../components/Tooltip";
import { PRESETS } from "../../presets";

//async component for gatsby production build
const GraphqlBirdseye = asyncComponent({
  resolve: () => require("graphql-birdseye"),
  LoadingComponent: () =&gt; <div>, // Optional
  ErrorComponent: () =&gt; <div>Uh oh..</div>, // Optional
});

const HomePage = () =&gt; {
  const [schema, setSchema] = useState();
  const [schemaError, setSchemaError] = useState("");
  const birdsEyeRef = useRef(null);
  const heroRef = useRef(null);
  const getStartedRef = useRef(null);

  const presetNames = Object.keys(PRESETS);

  const fetchSchema = async (url: string, activePreset?: any) =&gt; {
    try {</div>

import React, { Fragment } from 'react';
import { asyncComponent } from 'react-async-component';
import { metrics } from 'react-metrics';
import metricsConfig from '../metrics';
import Navbars from './Navbars';
import Routes from './Routes';
import Footer from './Footer';
import NoScript from './NoScript';
import AppHelmet from './AppHelmet';

const SmartBanner = asyncComponent({
  resolve: () => import(/* webpackChunkName: "SmartBanner" */ './SmartBanner'),
});

const App = () => (

import * as customPropTypes from 'customPropTypes';
import React from 'react';
import { connect } from 'react-redux';

import Helmet from 'react-helmet';
import { asyncComponent } from 'react-async-component';
import Button from 'quran-components/lib/Button';
import ComponentLoader from 'components/ComponentLoader';
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
import makeHeadTags from 'helpers/makeHeadTags';

const Tafsir = asyncComponent({
  resolve: () => import(/* webpackChunkName: "Tafsir" */ 'components/Tafsir'),
  LoadingComponent: ComponentLoader,
});

const VerseTafsir = ({ verse, tafsir }) => (
  <div style="{{">
    </div>

import React from 'react';
import Helmet from 'react-helmet';
import { asyncComponent } from 'react-async-component';
import Button from 'quran-components/lib/Button';
import T, { KEYS } from './T';
import makeHelmetTags from '../helpers/makeHelmetTags';
import { ChapterShape, ChapterInfoShape } from '../shapes';

const ChapterInfoPanelContainer = asyncComponent({
  resolve: () =>
    import(/* webpackChunkName: "ChapterInfoPanelContainer" */ '../containers/ChapterInfoPanelContainer'),
});

const propTypes = {
  chapter: ChapterShape.isRequired,
  chapterInfo: ChapterInfoShape.isRequired,
};

type Props = {
  chapter: ChapterShape;
  chapterInfo: ChapterInfoShape;
};

const ChapterInfo: React.SFC = ({ chapter, chapterInfo }: Props) => (
  <div style="{{"></div>

import { asyncComponent } from 'react-async-component';

export default asyncComponent({
  resolve: function resolve() {
    return new Promise(function (resolve) {
      return (
        // Webpack's code splitting API w/naming
        require.ensure([], function (require) {
          resolve(require('./views'));
        }, 'auth')
      );
    });
  }
});
//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhY2thZ2VzL2F1dGgvYXV0aC1tb2RhbHMuZXM2Il0sIm5hbWVzIjpbImFzeW5jQ29tcG9uZW50IiwicmVzb2x2ZSIsIlByb21pc2UiLCJyZXF1aXJlIiwiZW5zdXJlIl0sIm1hcHBpbmdzIjoiQUFBQSxTQUFTQSxjQUFULFFBQStCLHVCQUEvQjs7QUFFQSxlQUFlQSxlQUFlO0FBQzVCQyxXQUFTO0FBQUEsV0FDUCxJQUFJQyxPQUFKLENBQVk7QUFBQTtBQUNWO0FBQ0FDLGdCQUFRQyxNQUFSLENBQ0UsRUFERixFQUVFLG1CQUFXO0FBQ1RILGtCQUFRRSxRQUFRLFNBQVIsQ0FBUjtBQUNELFNBSkgsRUFLRSxNQUxGO0FBRlU7QUFBQSxLQUFaLENBRE87QUFBQTtBQURtQixDQUFmLENBQWYiLCJmaWxlIjoicGFja2FnZXMvYXV0aC9hdXRoLW1vZGFscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGFzeW5jQ29tcG9uZW50IH0gZnJvbSAncmVhY3QtYXN5bmMtY29tcG9uZW50JztcblxuZXhwb3J0IGRlZmF1bHQgYXN5bmNDb21wb25lbnQoe1xuICByZXNvbHZlOiAoKSA9PlxuICAgIG5ldyBQcm9taXNlKHJlc29sdmUgPT5cbiAgICAgIC8vIFdlYnBhY2sncyBjb2RlIHNwbGl0dGluZyBBUEkgdy9uYW1pbmdcbiAgICAgIHJlcXVpcmUuZW5zdXJlKFxuICAgICAgICBbXSxcbiAgICAgICAgcmVxdWlyZSA9PiB7XG4gICAgICAgICAgcmVzb2x2ZShyZXF1aXJlKCcuL3ZpZXdzJykpO1xuICAgICAgICB9LFxuICAgICAgICAnYXV0aCcsXG4gICAgICApLFxuICAgICksXG59KTtcbiJdfQ==

{
    path: '/:chapterId(\\d+)/:range/tafsirs/:tafsirId',
    component: asyncComponent({
      resolve: () =>
        import(/* webpackChunkName: "VerseTafsir" */ './containers/VerseTafsir'),
    }),
    loadData: [versesConnect, tafsirConnect],
  },
  {
    path: '/:chapterId(\\d+)/:range/:translations',
    component: asyncComponent({
      resolve: () =>
        import(/* webpackChunkName: "Chapter" */ './containers/Chapter'),
    }),
    loadData: [chaptersConnect, chapterInfoConnect, versesConnect],
    navbar: asyncComponent({
      resolve: () =>
        import(/* webpackChunkName: "GlobalNavChapter" */ './components/GlobalNav/Chapter'),
    }),
    onEnter: validators,
  },
  {
    path: '/:chapterId(\\d+)/:range?.pdf',
    component: asyncComponent({
      resolve: () => import(/* webpackChunkName: "Pdf" */ './containers/Pdf'),
    }),
    loadData: [chaptersConnect, versesConnect],
    footer: asyncComponent({
      resolve: () =>
        import(/* webpackChunkName: "PdfFooter" */ './components/Footer/PdfFooter'),
    }),
    onEnter: validators,

import(/* webpackChunkName: "Chapter" */ './containers/Chapter'),
    }),
    loadData: [chaptersConnect, chapterInfoConnect, versesConnect],
    navbar: asyncComponent({
      resolve: () =>
        import(/* webpackChunkName: "GlobalNavChapter" */ './components/GlobalNav/Chapter'),
    }),
    onEnter: validators,
  },
  {
    path: '/:chapterId(\\d+)/:range?.pdf',
    component: asyncComponent({
      resolve: () => import(/* webpackChunkName: "Pdf" */ './containers/Pdf'),
    }),
    loadData: [chaptersConnect, versesConnect],
    footer: asyncComponent({
      resolve: () =>
        import(/* webpackChunkName: "PdfFooter" */ './components/Footer/PdfFooter'),
    }),
    onEnter: validators,
  },
  {
    path: '/:chapterId(\\d+)/:range?',
    component: asyncComponent({
      resolve: () =>
        import(/* webpackChunkName: "Chapter" */ './containers/Chapter'),
    }),
    loadData: [chaptersConnect, chapterInfoConnect, versesConnect],
    navbar: asyncComponent({
      resolve: () =>
        import(/* webpackChunkName: "GlobalNavChapter" */ './components/GlobalNav/Chapter'),
    }),

function makeAsyncComponent(importFunc){
  return asyncComponent({
    resolve: importFunc,
    LoadingComponent: Loading, // Optional
    ErrorComponent: ErrorMessage // Optional
  });
}

import React from "react";
import { asyncComponent } from "react-async-component";
import { Redirect, Route, Switch } from "react-router";
import Spinner from "../components/Spinner";  // used for loading animation

const Home = asyncComponent({
  LoadingComponent: Spinner,
  resolve: () => import(/* webpackPrefetch: true*/ "./Home")
});
const Issues = asyncComponent({
  LoadingComponent: Spinner,
  resolve: () => import(/* webpackPrefetch: true*/ "./Issues")
});
const Projects = asyncComponent({
  LoadingComponent: Spinner,
  resolve: () => import(/* webpackPrefetch: true*/ "./Projects")
});
const About = asyncComponent({
  LoadingComponent: Spinner,
  resolve: () => import(/* webpackPrefetch: true*/ "./About")
});

const Admin = asyncComponent({
  LoadingComponent: Spinner,
  resolve: () => import(/* webpackPrefetch: true*/ "./Admin")
});