Is a Spinner right for this UI?

1. What is a spinner in UI?
2. What does loading spinner mean?
3. How long should a loading animation be?
4. What is a loading page?

What is a spinner in UI?

A spinner is an animated element that appears after a user's action to indicate that saving or loading is in progress. Implementation (Vue.js)

What does loading spinner mean?

A loading spinner is generally a branded element with a looping animation that indicates loading is in process and where it will appear.

How long should a loading animation be?

10 seconds is about the limit for keeping the user's attention focused on the dialogue. For the longer delays, users perform other tasks while waiting for the device to load, so they should be given feedback displaying the expected time to complete.

What is a loading page?

Loading pages are screens that users see when the app they are using is being loaded. They are important because they help users focus on the loading progress, not on the loading time. It's also a confirmation that things are moving forward, and the app isn't broken.