Jestem nowy w React i próbuję wyświetlić animację ładowania na stronie/zmianie adresu URL (kliknięcie przycisku) - https://codesandbox.io/s/cthulul-7zmsl?fontsize=14

Udało mi się sprawić, by animacja działała przy początkowym ładowaniu, ale problem, który mam teraz, polega na tym, że animacja ładowania wyświetla się po kliknięciu przycisku, ale także natychmiast wyświetla zawartość strony (każda strona jest tylko h1 do testowania), a animacja ładowania się nie kończy. Wyczyściłem piaskownicę, aby wyświetlić jedyną "działającą" wersję, do której mogłem się dostać.

0
CodesByMo 12 listopad 2019, 22:32
Programy ładujące powinny znajdować się na poziomie „strony”, więc każda strona powinna sama decydować, kiedy pokazać moduł ładujący, a kiedy cokolwiek innego (zawartość strony)
 – 
vsync
12 listopad 2019, 22:41

1 odpowiedź

Usuń komponent ładowania w miejscu, w którym podałeś trasę Spróbuj tego

Home.js

//Apply in each js file
import React from 'react'
import Loading from "../../components/loading/loading";

export default class Home extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
          loaded: false,
          done:false
        };
      }
   componentDidMount() {
        setTimeout(() => {
          this.setState({loaded:true})
        }, 1500);
      }
      }
    render()
    {
        return(
            <div>Home {this.state.loaded ? "" : <Loading />}</div>
        )
    }
}
0
Zaid Mansuri 15 listopad 2019, 12:25