Creare un loading dialog in React

Mattepuffo's logo
Creare un loading dialog in React

Creare un loading dialog in React

Ciao e Buona Pasqua a tutti!

In attesa di uscire da questa situazione di quarantena e tornare tutti liberi, una giornata vale l'altra.

E quindi perchè non scrivere anche oggi?

Oggi vediamo come mostrare all'utente un loading quando arriva su una pagina che deve caricare i dati.

Tutto ciò in React!

Come libreria grafica sto usando Primereact, ma il concetto è lo stesso anche con altre librerie, o se lo fate tutto a mano da zero.

Infatti nell'esempio non ho usato nessuno spinner della libreria, ma ho mostrato solo una scritta:

import React from 'react';
import {Card} from 'primereact/card';
import {ProgressSpinner} from 'primereact/progressspinner';
import axios from 'axios';

export default class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            films: [],
        };
    }

    async componentDidMount() {
        await axios.get("https://www.sito.it/api/")
            .then(res => {
                this.setState({
                    films: res.data
                });
            });

        // console.log(this.state.films);
    }

    render() {
        if (this.state.films.length == 0) {
            return <div>Loading....</div>;
        }

        return (
            <Card title="Films">
                <div className="content-section implementation">
					// VISUALIZZA DATI
                </div>
            </Card>
        );
    }
}

Come vedete nel componentDidMount andiamo a prendere i dati che poi visualizzerete.

Può capitare che siano tanti, o che il server sia lento, ecc.

Quindi nel render andiamo a controllare che l'array dei dati sia vuoto.

Fino a quanto lo è mostra la scritta; che poi scompare in automatico visualizzando i dati.

Enjoy!


Share this Post

Commentami!