Componente Spinner

https://loading.io/css

He entendido más ahorita que en el curso anterior, la calidad de los cursos ha mejorado bastante.

Hola Devs:
-Para simular perfectamente la animacion de cargar, les recomiendo que vaya a las DevsTools (click derecho inspeccionar), en la seccion de network o red, y utilizar la conexion 3g slow, asi simularian el retardo de la peticion y podran simular perfectamente.

Aqui les tengo mi avance en lo que va del curso, realizado por mi propia solucion:

Mi componente principal Users:

Mi componente TableContainer:

Mi componente TableUsers:

Pueden visitar mi repositorio donde tengo todo el avance del curso sin problemas y hecho totalmente configurado desde cero: Click Aqui
Recuerden, #NuncaParesDeAprender 💚

estoy entendiendo todo con Rodolfo, excelente explicación.

Hasta ahora claro se va entiendo muy bien, claro yo tengo el curso anterior, pero en este he entiendo muy bien, sobretodo la llamada al Api, que es para mi muy importante.

Si vuelven a hacer un curso sobre redux, por favor vuelvan a poner a este profesor, es muy bueno. Es de los mejores profesores que he visto en Platzi.

cuidado con poner el código del loader con {} y no con () ya que nos va a generar un error por que si lo ponen con {} el programa va a esperar una función cuando no es el caso.

Este es codigo bien hecho

import React from 'react'
import '../../css/loader.css'
const Loader = () => (
  <div className="center">
    <div className="lds-ellipsis">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
  </div>
)

export default Loader

(los divs y el className varian dependiendo del Spinner que escogieran)

Aqui hay mas animaciones de carga con css
tobiasahlin.com/spinkit

Para poder ver mejor el escenario, pueden ir a la opción de network presionando f12 y selecionado Network buscan la palabra online y la cambian por slow3G para poder observar la palabra cargando.

Yo lo implemente así:

import React, { Component } from "react";
import { connect } from "react-redux";

import * as usersActions from "../../src/actions/usersActions";

import "./styles/Users.css";

import Loader from "./Loader"

class Users extends Component {
  addRows = () =>
    this.props.users.map((user) => (
      <tr key={user.id}>
        <td>{user.name}</td>

        <td>{user.email}</td>

        <td>{user.website}</td>
      </tr>
    ));

  componentDidMount() {
    this.props.getAll();
  }

  render() {
    console.log(this.props.loading)
    console.log(this.props.error)

    let isLoading = this.props.loading;
    return (
      <div className="margin">
        <table className="table">
          <thead>
            <tr>
              <th>Nombre</th>

              <th>Correo</th>

              <th>Enlace</th>
            </tr>
          </thead>

          <tbody>{isLoading ? <Loader /> : this.addRows()}</tbody>
        </table>
      </div>
    );
  }
}

const mapStateToProps = (reducers) => {
  return reducers.usersReducer;
};

export default connect(mapStateToProps, usersActions)(Users);

vamos mejorando 😃

Muy bien por el componente de Spinner es genial

Justo ese era mi pregunta la clase anterior xd

Comparto mi solucion, estoy tomando el curso en 2022, por eso aplique estos conceptos:

• componentes funcionlaes
• useEffect (en vez de componentDidMont)
• finalmente hice una separacion de componentes para tener mas orden

import * as actionCreator from '../../Redux/Actions/usersActionsCreator';
import { connect } from 'react-redux';
import React, {useEffect} from 'react';
import UserItem from './userItem';
import Loading from '../../Pages/Loading';
import Error from '../../Pages/Error';

function Users(props) {

    useEffect( ()=>{
        // Si ya traje usuarios no hay que volver a traerlos
        if (!props.users.length) {
            // Esta funcion se encuenra en usersActionsCreator
            props.fetchUsers();
        }
    },[] );

    return (
        <div className="container py-3">
            { (props.error && !props.loading) && ( <Error error={props.error}/> ) }

            { props.loading && ( <Loading/> ) }

            { (!props.loading && !props.error) && <UserItem/>  }
        </div>
    )
}

const mapStateToProps = (reducers) => {
    return reducers.usersReducer;
};

export default connect( mapStateToProps, actionCreator)(Users);

Mi aporte:

// Users.js
import React from 'react';
import { connect } from 'react-redux'
import * as usersActions from '../../actions/usersActions'
import { Spinner } from '../Spinner';

class Users extends React.Component {
  componentDidMount() {
    this.props.getUsers();
  }

  drawUserRows() {
    return this.props.users.map(user => (
      <tr key={user.id}>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.website}</td>
      </tr>
    ))
  }

  showContent() {
    return (
      this.props.loading
        ? <Spinner />
        : (
          <table className="App">
            <thead>
              <tr>
                <th>
                  Nombre
                </th>
                <th>
                  Correo
                </th>
                <th>
                  Enlace
                </th>
              </tr>
            </thead>
            <tbody>
              {this.drawUserRows()}
            </tbody>
          </table>
        )
    )
  }

  render() {
    console.log(`this.props`, this.props)
    return <>
      {this.showContent()}
    </>
  }
}

const mapStateToProps = (reducers) => {
  return reducers.usersReducer;
}

export default connect(mapStateToProps, usersActions)(Users);

// spinner.js
import '../../styles/components/Spinner.css';

export const Spinner = () => (
  <div className="Spinner">
    <h3>Cargando</h3>
    <div className="lds-grid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
);

Componente Spinner

Pure CSS Loader

Le vamos a decir al usuario que la información está cargando con el uso de animaciones.

Podemos tomar de la página web cualquier Spinner o Loader que querramos en nuestro proyecto.

Copiamos el código CSS y este lo guardaremos como un componente, así que creamos una carpeta “css” y dentro
hacemos el archivo “loader.css”.

Luego copiamos el código HTML, esté será guardado dentro la carpeta “General”, dentro de la carpeta “components”.

Loader.js:

import React from 'react';
import '../../css/loader.css';

const Loader = (props) => (
  <div className="center">
    // Código del Loader
  </div>
);

export default Loader;

Modificamos el archivo index.js de la carpeta users:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Loader from '../General/Loader';
import * as usuariosActions from '../../actions/usuariosActions';

class Users extends Component {

  componentDidMount() {
    this.props.traerTodos();
  }

  ponerContenido = () => {
    if (this.props.cargando) {
      return <Loader />;
    }

    return(
      <table className="tabla">
        <thead>
          <tr>
            <th>Name</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          { this.ponerFilas() }
        </tbody>
      </table>
    )
  }

  //* Por cada usuario, tendré una fila
  ponerFilas = () => this.props.usuarios.map((usuario) => (
    <tr key={ usuario.id }>
      <td>{ usuario.name }</td>
      <td>{ usuario.email }</td>
      <td>{ usuario.website }</td>
  </tr>
  ))

  render(){
    return (
      <div>
        { this.ponerContenido() }
      </div>
    )
  }

}

const mapStateToProps = (reducers) => {
  return reducers.usuariosReducers;
}

export default connect(mapStateToProps, usuariosActions)(Users);

Con esto tenemos un Loader que se va a mostrar cuando estamos cargando información.

el inicio del curso fue un poco doloroso pero el profe es tan bueno que eventualmente es fácil entender la clase

muy Buena clase

Hasta ahora todo muy claro

Excelente clase. 🙂

Me lo estoy gozando con estas clases por que todo me queda muy claro 😄

Directo a marcadores esa pagina de spinners. Si alguien tiene mas de esas aviseme

Por alguna razón al borrar el index.css de /src me marco errores provenientes de node_modules diciendo que no encontraba el archivo index.css que (yo creo) corre por default alguna paquetería. Lo resolví con:

npm rebuild node-sass

excelente clase!!

Me agrada la forma de explicación del profesor, pero estoy realmente absorto de la forma en que se ordenan los archivos porque pareciese que no hay una metodología o conocimiento de la mutación del código.
Un poco de estructura mejora todo en React.