Creating a reusable component

Is it possible to create a reusable component so that we don’t have to repeat ourselves like this all the time:

const One = Loadable({
  loader: () => import('./components/One'),
  loading() {
    return <Preloader />
  }
});
const Two = Loadable({
  loader: () => import('./components/Two'),
  loading() {
    return <Preloader />
  }
});

I tried to do it like this:

import Loadable from 'loadable-components';

const Load = ({ loader, ...otherProps }) => {
  const LoadableComponent = Loadable(loader, { LoadingComponent: Preloader });
  return <LoadableComponent {...otherProps} />;
};

and then:

<Route path="/one" render={props => <Load loader={() => import('components/One')} />} />
<Route path="/two" render={props => <Load loader={() => import('components/Two')} />} />

But I start getting into weird infinite loops with this approach. Any ideas?

[gregberge]

// custom-loadable.js
import loadable from '@loadable/component'

export default fn => loadable(fn, { fallback: 'Loading...' })

// app.js
import loadable from './custom-loadable'

const OtherComponent = loadable(() => import('./OtherComponent'))

If you want to be compatible with SSR, using the loadable name is required.

[sagar-gavhane]

react-loadable library given demonstrated on HOC component to avoid repetitions inside FAQ’s

https://github.com/jamiebuilds/react-loadable#how-do-i-avoid-repetition