Реакция: Как показать Spinner & Component (в то же время) при изменении состояния с помощью `useEffect`

Question

Я использую условный рендеринг, чтобы показать spinner во время первого вызова API. И когда date изменяется, как видно в массиве зависимостей useEffect, он снова вызывает API-интерфейс

Вопрос:

Если выборка данных не завершена, старые данные отображаются на экране. Но я хочу, чтобы spinner показывал поверх старых данных, чтобы пользователь мог чувствовать, что идет загрузка данных.

Текущая реализация, то есть условный рендеринг, показывает только один компонент: либо spinner, либо Grid.

Spinner

Сетка компонента

    import React, { Component, useState, useEffect } from "react";
    import { connect } from "react-redux";
    import ApiHelper from "../../api/ApiHelper";
    import ReactDataGrid from "react-data-grid";
    import { Toolbar, Data, Filters } from "react-data-grid-addons";
    import JarvisSpinner from "../presentationalComponents/JarvisSpinner";
    import { withRouter } from "react-router-dom";
    import "../../css/styles.css";
    import "../../css/JarvisGrid.css";

    const JarvisGrid = (props) => {
      const [pagesize, setPageSize] = useState(15);
      const [data, setdata] = useState([]);
      const [filters, setFilters] = useState({
        filterfield: "Application Send",
        filtervalue: "Base",
      });
      const [sort, setSort] = useState({
        Field: "PublicOrderNumber",
        Direction: "desc",
      });
      const [loading, setloading] = useState(true);

      useEffect(() => {
        //Set data
        ReloadData();
      }, [props.uid, props.CalendarDates.fromDate, props.CalendarDates.toDate]);


      // For Loading Data using API
      const ReloadData = () => {
        ApiHelper.GetGridQueryResult(
          props.uid,
          props.filterField,
          props.filterValue,
          props.CalendarDates.fromDate,
          props.CalendarDates.toDate
        )
          .then((response) => {
            setdata(response.data.responses);
            setloading(!loading);
          })
          .catch((error) => {
            setdata([]);
            switch (error.response.status) {
              case 403:
                console.log("Error code --> " + 403);
                props.history.push("/unAuthorizedPage");
                break;
              default:
                console.log("Error String --->" + error);
            }
          });
      };

      return (
        <>
          {loading ? (
            <JarvisSpinner size="3x" />
          ) : (
            <div className="JarvisGrid">
              <ReactDataGrid
                columns={props.columns}
                rowGetter={(i) => data[i]}
                rowsCount={data.length}
                minHeight={500}
                uid={props.uid}
                enableRowSelect={null}
                enableCellSelect
                toolbar={<Toolbar enableFilter="true" />}
                onAddFilter={(filter) => {
                  setFilters({
                    filterfield: filter.column.key,
                    filtervalue: filter.filterTerm,
                  });
                }}
                onClearFilters={() =>
                  setFilters({
                    filterfield: "OrderType",
                    filtervalue: "Base",
                  })
                }
                onGridSort={(sortColumn, sortDirection) => {
                  setSort({ Field: sortColumn, Direction: sortDirection });
                }}
              />
            </div>
          )}
        </>
      );


    };
    function mapStateToProps(state) {
      return {
        CalendarDates: state.calendarDates,
      };
    }

    export default withRouter(connect(mapStateToProps)(JarvisGrid));

Обратите внимание, что я использую redux для управления состоянием и react-router.

================= =============================== После реализации решения, предоставленного MwamiTovi Теперь мне нужно выяснить, что такое наложение.

Answer 1

Я бы сделал это в вашей ReloadData функции:

const ReloadData = () => {
    setLoading(true); // HERE

    ApiHelper.GetGridQueryResult(
      props.uid,
      props.filterField,
      props.filterValue,
      props.CalendarDates.fromDate,
      props.CalendarDates.toDate
    )
      .then((response) => {
        setdata(response.data.responses);
        setloading(false); // HERE
      })
      .catch((error) => {
        setdata([]);
        setloading(false); // HERE

        switch (error.response.status) {
          case 403:
            console.log("Error code --> " + 403);
            props.history.push("/unAuthorizedPage");
            break;
          default:
            console.log("Error String --->" + error);
        }
      });
  };

Answer 2

Это на самом деле хорошо, исходя из вашей логики c здесь:

// Within your "return" statement
return (
   <>
      {loading ? ( 
        <JarvisSpinner size="3x" />   // renders if `loading === true`
        ) : (
        <div className="JarvisGrid">  // renders if `loading === false`
          <ReactDataGrid .../>
        </div>
        )
      )}
   </>
)

Так вот что вы на самом деле хотите:

• Первый раз, загрузите только spinner во время вызова API

• После успешного извлечения данных (вызов API) отображается только компонент Grid

• При последующих вызовах API визуализируйте и spinner, и Grid

Давайте это:

// Initiate `data` as `null`
// After the first time, `data` will never be `null` again
const [data, setdata] = useState(null);

// Remember, !null === true since data === null,
// So first time API call, only spinner will show up,
// Upon the next calls, !data === false, so this won't load
if (!data) {
  return <JarvisSpinner size="3x" /> ;
}

// Within your "return" statement
// After the first API, all the other API calls will do this...
return (
   {loading ? ( 
     <>
        <JarvisSpinner size="3x" />  // renders both spinner & component, `loading === true`
        <div className="JarvisGrid"> // consider placing an "overlay" onto the component
          <ReactDataGrid .../>
        </div>
     </>
    ) : (
        <div className="JarvisGrid">  // renders only component, when `loading === false`
          <ReactDataGrid .../>
        </div>
        )
    )}
)

Answer 3

https://www.npmjs.com/package/react-loading-overlay

---

Проверьте это. Я считаю, что это может решить вашу проблему.

<LoadingOverlay
active={isLoading}
    spinner={Your own spinner}
    styles={{
    wrapper: {
       height: "100vh",
       overflow: "scroll"
    }
}}>
        <div>Show your content here</div>
</LoadingOverlay>