Cargar pantalla mientras DOM se está renderizando usando React

  2. HowTo
  3. React Howtos
  4. Cargar pantalla mientras DOM se está …
Oluwafisayo Oluwatayo 15 febrero 2024
React React DOM
  1. Use la función this.state para cargar la pantalla mientras DOM se está procesando usando React
  2. Use el gancho useEffect para cargar la pantalla mientras DOM se está procesando usando React
  3. Use la dependencia react-loader-spinner para cargar la pantalla mientras DOM se está procesando usando React
  4. Conclusión
Cargar pantalla mientras DOM se está renderizando usando React

El desarrollo web no se trata solo de crear aplicaciones que se carguen rápido y sin errores, también se trata de hacerlas hermosas, atractivas y agradables a la vista, y uno no puede decir que la página en blanco que nos saluda cuando lanzamos una aplicación en React es agradable. al ojo

Podemos hacer algo con esta página en blanco creando efectos que se muestren justo antes de que React DOM represente el contenido principal de la página, y hay diferentes formas de hacerlo.

Use la función this.state para cargar la pantalla mientras DOM se está procesando usando React

Este ejemplo proporciona un enfoque mucho más sencillo al aprovechar el tiempo de carga de la aplicación. Dentro del archivo App.js de nuestra carpeta proyecto, ingresaremos estos códigos:

Fragmento de código- App.js:

import React, {Component} from "react"

class App extends Component {
    constructor() {
        super()
        this.state = {
            loading: false,
            character: {}
        }
    }

    componentDidMount() {
        this.setState({loading: true})
        fetch("https://swapi.dev/api/people/1/")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    loading: false,
                    character: data
                })
            })
    }

    render() {
        const text = this.state.loading ? " page is loading..." : this.state.character.name
        return (
            <div>
                <p>{text}</p>
            </div>
        )
    }
}

export default App

Producción:

Use la función this.state para cargar la pantalla usando React Output

Estamos utilizando la API fetch() para obtener el nombre de un personaje de película, es decir, el contenido principal que se muestra en la página. Usamos la función this.state para decirle a React que mientras el contenido de la página aún se está recuperando, muestre la página se está cargando... en su lugar, y después de unos segundos, aparece el contenido principal, Luke Skywalker.

Use el gancho useEffect para cargar la pantalla mientras DOM se está procesando usando React

React useEffect es un buen enfoque para mostrar contenidos y mover animaciones alrededor de la pantalla, y usaremos este enfoque para crear una pantalla de precarga.

Primero, accederemos al archivo index.html dentro de la carpeta public de nuestra carpeta project y crearemos allí el efecto de pantalla de carga. Nuestra imagen tiene un enlace, que utilizaremos y luego crearemos estilos.

Vea el código a continuación.

Fragmento de código- index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>React App</title>
  <style>
    .preloader {
      display: flex;
      justify-content: center;
    }

    .rotate {
      animation: rotation 9s infinite linear;
    }

    .loader-hide {
      display: none;
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(359deg);
      }
    }
  </style>
</head>

<body>
  <div class="preloader">
    <img src="https://previews.123rf.com/images/nolimit46/nolimit462006/nolimit46200600489/148500740-modern-glowing-preloader-and-progress-loading-circle-bar-3d-render-background.jpg" class="rotate" width="100" height="100" />
  </div>
  <div id="root"></div>
</body>

</html>

Luego en el App.js, aplicamos el useEffect para controlar los efectos de carga, con el soporte de CSS dentro del index.html.

Fragmento de código- App.js:

import React, { useEffect } from "react";

import "./App.css";

const loader = document.querySelector(".preloader");

const showLoader = () => loader.classList.remove("preloader");
const addClass = () => loader.classList.add("loader-hide");

const App = () => {
  useEffect(() => {
    showLoader();
    addClass();
  }, []);
  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <h2>App react</h2>
    </div>
  );
};

export default App;

Producción:

Use el useEffect Hook para cargar la pantalla usando React Output

Use la dependencia react-loader-spinner para cargar la pantalla mientras DOM se está procesando usando React

La dependencia de React Loader es un ejemplo adecuado para crear hermosas pantallas de precarga en reaccionar. Ofrece una amplia gama de efectos de carga que los visitantes del sitio web adorarán antes de ingresar a un sitio web.

Dentro de la carpeta proyecto que hemos creado, instalaremos la dependencia con:

npm install react-loader-spinner

Luego crea una carpeta llamada componentes y dos archivos, Loading.js y Clock.js. Loading.js contendrá códigos para el efecto de la pantalla de carga, y Clock.js mostrará el contenido de la página principal.

Luego vamos al archivo App.js para configurar las cosas:

Fragmento de código- App.js:

import React, {useState, useEffect} from 'react';
import Loading from './components/Loading';
import Clock from './components/Clock';

function App() {
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 2500);
  })
  return (
    <div>
      {isLoading===true?
        <Loading/>:
        <Clock/>
      }
    </div>
  );
}

export default App;

Estamos usando el gancho useState para controlar el estado del componente Loading, y luego con useEffect, le decimos a React cuánto tiempo queremos que permanezca la pantalla de carga antes de que la página principal se represente desde el DOM.

Luego, en el archivo Loading.js, donde queremos configurar la pantalla de carga, importamos el tipo de efecto que queremos de la dependencia del selector de carga y la configuración de CSS para la dependencia. Luego copiamos y pegamos la configuración para ese efecto en particular desde este sitio:

https://www.npmjs.com/package/react-loader-spinner

Esto debería verse como el siguiente código.

Fragmento de código- Loading.js:

import React from 'react'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
import { Puff } from 'react-loader-spinner'

const Loading = () => {
    return (
        <div align="center">
            <Puff
                height="100"
                width="100"
                color='grey'
                ariaLabel='loading'
            />
        </div>
    )
}

export default Loading

Finalmente, configuramos el contenido principal de la página dentro del Clock.js así:

Fragmento de código-Clock.js:

import React from 'react'

const Clock = () => {
    return (
        <div align='center'>
            <h1>CLOCK</h1>
        </div>
    )
}

export default Clock

Producción:

Use react-loader-spinner para cargar la pantalla usando React Output

Como hemos establecido dentro del archivo App.js, una vez que la pantalla de carga llega a su ciclo de vida, se muestra el contenido del archivo Clock.js.

Conclusión

¿Quién no quiere evitar construir un sitio web aburrido sin nada para sorprender a los visitantes? Crear una pantalla de carga es una forma de acortar el tiempo de espera, donde los visitantes miran las pantallas en blanco hasta que se carga el sitio web.

Autor: Oluwafisayo Oluwatayo
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

Artículo relacionado - React DOM