Come faccio ad aggiungere la schermata di caricamento di un sito web in ReactJS?

Question 1

Io sono di veramente nuovo per ReactJs, JS e praticamente tutte di sviluppo web. Ho cercato di creare una singola pagina, portafoglio sito web utilizzando ReactJS e volevo provare alcune tecniche più avanzate, come l'utilizzo di ganci. Ho voluto creare un semplice effetto in cui un'animazione una volta (quando un utente accede al mio sito web), quindi sono portato per il sito principale. Tutte le risorse che ho trovato on-line riguardano le schermate di caricamento, mentre il recupero dei dati da un API. Ecco il mio codice per il caricamento della schermata:

import Typical from 'react-typical';
import "./Loading.scss";
import {useState, useEffect} from 'react';

const Loading = function Loading() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    },18000);

  }, [])

        return (
      <div>
        <h1 id="loading">
          { loading ?  <Typical oop={1} wrapper = 'p'
          steps={[
              "Hello",
              2000,
              "My name is Leonard.",
              3000,
              "I am an aspiring developer",
              3000,
              "Welcome to my website!",
              3000,
            ]} /> : null}
        </h1>
      </div>
    );

}

Sto utilizzando un semplice reagire pacchetto chiamato tipico che dà un bel animazione di parole digitate sulla schermata simile a una macchina da scrivere, e poi viene eliminato, quindi la prossima bit di testo viene mostrato ecc.. questo solo loop di una volta. Ho usato il useState e useEffect ganci con un timer per setLoading per falso in 18 anni, che è quando si interrompe l'animazione. Come potete vedere ho il rendering dell'animazione solo se il carico è vero, usando un operatore ternario, poi una volta che il caricamento viene impostata su false, null viene visualizzato. Il mio app.js assomiglia a questo:

import Nav from './Components/Nav';
import "./App.scss";
import Loading from './Components/Loading';

function App() {
  return (
    <div>
      <Loading /> 
      <main>
      <Nav/>
      </main>

    </div>

    
  );
}

export default App;

(Scusate per il terribile JSX). Il problema che sto avendo è che sia la navbar e la schermata di caricamento carichi allo stesso tempo. Non sono sicuro di come nascondere tutti i miei altri componenti fino a quando l'animazione è finito. Tutto ciò che cerco è mooolto complicato e davvero non sembra molto efficace per tutti. Apprezzo qualsiasi aiuto grazie!

Question 2

Il motivo per cui entrambi stanno mostrando allo stesso tempo, perché in app.js. Il <Loading /> componente e l' <Nav /> componente che viene reso al tempo stesso.

Ci sono due soluzioni, si può andare per

È possibile lo stile del caricamento del componente di prendere l'intero schermo e coprire il tutto. Questo può essere fatto dando la schermata di caricamento di un documento di identità. Dire, loading-screen per esempio e fare la seguente css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

MA assicurarsi, dopo il caricamento il tempo passa per nascondere la schermata di caricamento, in caso contrario, verrà continuare a bloccare la vista.

Si può mettere il caricamento di logica app.js invece di essere all'interno del Caricamento del componente. È possibile rendere il Caricamento di componenti come lungo come a carico dello stato è vero altrimenti caricare il resto della app (navbar, ecc..). Si può fare qualcosa di simile:

function App() {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setTimeout(() => {
            setLoading(false)
        }, 18000);
    }, []);

    return (
        <div>
            {loading ? (<Loading />) :
                (
                    <main>
                        <Nav />
                    </main>
                )
            }
        </div>
    );
}

Youssef Negm · Answer 1 · 2021-11-24T00:53:42

Il motivo per cui entrambi stanno mostrando allo stesso tempo, perché in app.js. Il <Loading /> componente e l' <Nav /> componente che viene reso al tempo stesso.

Ci sono due soluzioni, si può andare per

È possibile lo stile del caricamento del componente di prendere l'intero schermo e coprire il tutto. Questo può essere fatto dando la schermata di caricamento di un documento di identità. Dire, loading-screen per esempio e fare la seguente css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

MA assicurarsi, dopo il caricamento il tempo passa per nascondere la schermata di caricamento, in caso contrario, verrà continuare a bloccare la vista.

Si può mettere il caricamento di logica app.js invece di essere all'interno del Caricamento del componente. È possibile rendere il Caricamento di componenti come lungo come a carico dello stato è vero altrimenti caricare il resto della app (navbar, ecc..). Si può fare qualcosa di simile:

function App() {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setTimeout(() => {
            setLoading(false)
        }, 18000);
    }, []);

    return (
        <div>
            {loading ? (<Loading />) :
                (
                    <main>
                        <Nav />
                    </main>
                )
            }
        </div>
    );
}

Perché non possiamo usare il lazy loading fallback come un carico cosa. Non danno lo stesso risultato?

Come faccio ad aggiungere la schermata di caricamento di un sito web in ReactJS?

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria