How does React+Antd Mobile realize the progress bar loading animation when the page jumps?

React+Antd Mobile project

problem description

when you want to jump to a page (for example, homepage -> page A ),
where page An is a list page, you need to request data from the backend API, which takes about 1 minute or 2 seconds to wait.

there can be a progress bar animated at the top,

the page content is blank when loading is in progress,

Page An is displayed only after the list data in page A has been obtained.

similar to the following effect:

clipboard.png

clipboard.png

is there a mature plug-in or a suitable solution?

Dec.28,2021

look at the picture. This is app webview ?
1. If so, it is recommended that the app developer handle the page loading progress instead of processing the request progress.
2. If not, use store to display loding .
axios is intercepted in the request. Before the request, isLoding in store is true , and the request is set to false .
as for the progress bar
https://github.com/minhtranit.

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-1e4892e-44cdb.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-1e4892e-44cdb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?