javascript - Vue's embarrassing problem of waiting for backend data

Question

I believe everyone knows that the spa developed with vue obtains data through asynchronous requests.
Now I want to add a loading icon to the project to indicate that the data is loading
Open the loading component before the ajax request is sent
Close in callback
However, due to network problems, some users have a better network environment, and the loading page basically passes by in a flash.
And some users with a poor network can get a better user experience
What I am embarrassed about now is that users who load data very quickly will see a black shadow flash for a moment, and I always feel that this is not perfect enough
I don’t know if anyone has a better solution?

Answer 1

Add animation to the loading icon, ranging from light to dark colors. Even if it flashes, there is only a faint trace

Answer 2

Refer to the loading of element-ui: http://element.eleme.io/#/zh-...

Answer 3

Wow, then you can give the Loding graph a minimum time. For example, if the time is lower than 1s, force it to one second. The upper limit is not capped. . .