import React, { lazy, useState, useEffect, Suspense } from 'react';

export default function lazyContainer(factory) {
  const Component = lazy(factory);
  return props => {
    const [mount, setMount] = useState(false);

    useEffect(() => {
      if (props.visible && !mount) {
        setMount(true);
      }
    }, [props.visible, mount]);
    return mount ? (
      <Suspense fallback="">
        <Component {...props} />
      </Suspense>
    ) : null;
  };
}
