Echo JS 0.11.0

<~>

tracker1 1676 days ago. link 1 point
Using an abstraction component below to asynchronously load areas of the application with particularly heavy references... like sections that use charts or xlsx to keep initial dependency size smaller.  Loading is just an svg+css spinner as a placeholder.

    import React, { Suspense } from 'react';
    import Loading from './app/Loading';

    // wrap a component into a lazy loader - for use with components below
    export default function loadComponent(importStatement) {
      const Component = React.lazy(importStatement);
      return (...props) => (
        <Suspense fallback={<Loading />}>
          <Component {...props} />
        </Suspense>
      );
    }

It's generally wrapping my feature component export(s) like...

    // feature/foo/index.js
    import load from '../load-component-import';
    export default load(() => import('./FooComponent'));

And the main feature exports are referenced in the Router.

Main smaller areas aren't wrapped like this.. but where it gets big on certain dependencies, it helps keep the main bundle at least not crazy... still big with react + material-ui baseline.