How to achieve the effect of loading with react

as shown in the figure, the effect is similar to this:

clipboard.png

The fetch, used by the

request data would like to know whether the effect of this loading is written in the life cycle or in the fetch request?
how to achieve this effect?

React.js
Apr.01,2021

give the landlord an idea:
set state
loading: false

when the component is initialized first.

then set loading to true when sending a fetch request
set it to false when success / failure

then, in the render method, dynamically change whether the loading component displays

according to false | true.

this is a good thing to write in the global tools file, because you can use it as long as you call the interface. 

const tools = {
/**
 * loading
 * @return {[type]}
 */
showLoading() {
    if (this.loadingCount <= 0) {
        ReactDOM.render(
            <div className="sy-loadingwrap">
                <Spin size="large"></Spin>
            </div>,
            document.getElementById("sy-loading")
        );
    }
    this.loadingCountPP;
},
/**
 * loading
 * @return {[type]}
 */
hideLoading() {
    if (this.loadingCount === 0) return;
    this.loadingCount--;
    if (this.loadingCount === 0) {
        ReactDOM.unmountComponentAtNode(document.getElementById("sy-loading"));
    }
},
}

call tools.showLoading () before ajax send, and call tools.hideLoading ()

in the complete where the ajax request is completed.

you still have to look at the scene. Personally, I have written in both the request and the component .

if you need to loading, at the request level, put it on the request. If you need to be in a component (you can think of it as a collection of requests), then loading can be written to the component state.

the implementation is very simple. Take the request level as an example, you only need to set different state,view before and after fetch to decide whether to render loading or not according to state.

it is recommended to use antd-Spin

Previous: The antd-mobile2.2 version officially says that there is no need to configure a high-definition solution, so how to use rem for mobile adaptation? Please give an example to illustrate

Next: Quote the api, of Amap js to add a click event to the dot tag, but there is no response.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36dc2-2c02d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36dc2-2c02d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?