Using a spinner without Ajax

Question

Well, I hope you can help me, this is giving me a lot of trouble

I'm using Razor with Net 8 MVC and I want a spinner to appear in two situations:

• The first, before loading the page.
• The second is in the time interval between when the view goes to the controller, and the controller responds with a new model.

The problem, I don't want to use AJAX, it would mean a lot of changes in many lines of code and I want to avoid it as much as possible.

Well, is this possible? Do you know any way to do it? I hope we can find a solution or give me some indication or clue to follow me the rest of the way.

Many Thanks

Answer 1

You may put the spinner at the very top of the page to render it ASAP (before any other thing), then hide once the page is fully loaded.

window.addEventListener('load', () => {
    document.querySelector('.loading-spinner').style.display = 'none';
});

To handle page navigation, you may assign an event to every anchor to show it again:

document.querySelectorAll('a').forEach(el => {
    el.addEventListener('click', () => {
        document.querySelector('.loading-spinner').style.display = 'flex';
    });
});

Here is an example: Codepen.