Quiero agregar carga de pantalla en el próximo proyecto js. Y traté de hacer eso con el componente Router en next/router.

Este es mi _app.js en el proyecto next.js:

import {CookiesProvider} from 'react-cookie';
import App from 'next/app'
import React from 'react'
import {Provider} from 'react-redux'
import withRedux from 'next-redux-wrapper'
import withReduxSaga from 'next-redux-saga'
import createStore from '../src/redux/store'
import Router from "next/router";
import {Loaded, Loading} from "../src/util/Utils";

class MyApp extends App {

    static async getInitialProps({Component, ctx}) {
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps({ctx})
        }

        return {pageProps}
    }

    render() {
        Router.onRouteChangeStart = () => {
            Loading()
        };

        Router.onRouteChangeComplete = () => {
            Loaded()
        };

        Router.onRouteChangeError = () => {
            Loaded()
        };

        const {Component, pageProps, store} = this.props;
        return (
            <CookiesProvider>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </CookiesProvider>
        )
    }
}

export default withRedux(createStore)(withReduxSaga(MyApp))

Estas son las funciones Loaded() y Loading():

export const Loaded = () => {
    setTimeout(() => {
        let loading = 'has-loading';
        document.body.classList.remove(loading);
    }, 100);
};

export const Loading = () => {
    let loading = 'has-loading';
    document.body.classList.add(loading);
};

El código funciona bien cuando el proyecto está en modo de desarrollo. Pero cuando se construye el proyecto, la carga no desaparecerá.

¿Conoces la solución de este problema o estás sugiriendo otra solución?

0
Nima Kaviyani 24 feb. 2020 a las 18:29

2 respuestas

La mejor respuesta

Agregué los siguientes códigos a un componente contenedor y el problema se resolvió.

componentDidMount() {
    Loaded();
}

componentWillUnmount() {
    Loading();
}
0
Nima Kaviyani 25 feb. 2020 a las 10:59

Usando apollo client y react hooks puede hacer lo siguiente.

Ejemplo:

import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

import { withApollo } from '../lib/apollo';
import UserCard from '../components/UserCard';

export const USER_INFO_QUERY = gql`
  query getUser ($login: String!) {
    user(login: $login) {
      name
      bio
      avatarUrl
      url
    }
  }
`;

const Index = () => {
  const { query } = useRouter();
  const { login = 'default' } = query;
  const { loading, error, data } = useQuery(USER_INFO_QUERY, {
    variables: { login },
  });

  if (loading) return 'Loading...';            // Loading component
  if (error) return `Error! ${error.message}`; // Error component

  const { user } = data;

  return (
    <UserCard
      float
      href={user.url}
      headerImg="example.jpg"
      avatarImg={user.avatarUrl}
      name={user.name}
      bio={user.bio}
    />
  );
};

export default withApollo({ ssr: true })(Index);

Más información aquí: https://github.com/zeit/ next.js / tree / canary / examples / with-apollo

0
ddon-90 24 feb. 2020 a las 16:46