rethink use of Loadable component

[csantiago132]

types are being lost due to how React-Loadable imports components

[csantiago132]

based on this bloc post and react's release notes on 16.6

// new way in react 16.6
import React, { lazy, Suspense } from 'react';
import LoadingIndicator from './components/LoadingIndicator';

/**
 * set component by importing it like Loadable
 */
const Component = lazy(() => import('./ComponentExample'));

export default () => (
  /**
   * Fallback is the Loading component; spinner or whatever we want to pass
   * 
   * Suspense is the wrapper used to container everything exported
   * 
   * Pass the component wrapped in lazy() as a children of <Suspense/>
   * 
   */
  <Suspense fallback={<LoadingIndicator />}>
    <Component />
  </Suspense>
);

// react-loadable reference
import Loadable from 'react-loadable';

export default Loadable({
  loader: () => import('./CreateChatRoom'),
  loading: () => null,
});

[csantiago132]

@types/react has not been updated to v16.6, currently its at v16.4.14 yet so imports in typescript from { lazy, Suspense } will error out since they're not define.

[csantiago132]

see this issue tracking it

[csantiago132]

another workaround: seems like @types/16.6 will take a while to get out, looking at 16.7 too

import React from "react";
const Suspense = (React as any).Suspense;
const lazy = (React as any).lazy;