загружается с помощью GatsbyJS - PullRequest
Новая
       18

загружается с помощью GatsbyJS

0 голосов
/ 15 июня 2019

Я использую реагирующую загрузку с Gatsby, и у меня есть вопрос о загрузке компонента и его запуске.

Похоже, что я все настроил правильно, потому что я могу успешно загрузить модальный компонент только после нажатия кнопки и проверки этого в инструментах разработки. Однако я не смог отобразить загрузочный компонент до того, как загружаемый компонент полностью отобразится. Вот пример того, что я делаю до сих пор: 


function Loading() {
  return (
    <h1>
      Loading...
    </h1>
  );
}

const LoadableVideo = Loadable({
  loader: () => import("../Video/Video"),
  loading: Loading,
  delay: 0
});


export default props => {
  const [modalOpen, setModalOpen] = useState(false);

  const closeModal = () => {
    setModalOpen(false);
  };

  const openModal = () => {
    setModalOpen(true);
  };

  return (
    <div>
      <WatchContainer onClick={openModal}>
        <VideoLink>Watch the film</VideoLink>
        <PlayButton />
      </WatchContainer>

      {modalOpen ? (
        <ModalContainer show={modalOpen} closeModalCallback={closeModal}>
          <div style={{ width: "80%", backgroundColor: "gainsboro" }}>
            <LoadableVideo />
          </div>
        </ModalContainer>
      ) : null}
    </div>
  );
};

Я немного озадачен тем, почему я могу успешно загрузить разделенный компонент Video, но никогда не вижу компонент Loading. Я даже попытался сделать задержку равной 0, как показано выше. Это связано с чем-то связанным с Гэтсби и ССР? Какие-нибудь мысли?

Спасибо!

...