add loader

[noworneverev]

Short description

add loader for page navigation and refreshing the page.

Proposed changes

• add loading effect for changing pages and time-consuming operation, for example, add patients, add wards, and assign patients, etc.

Side effects

Resolved issues

Fixes: #104

[charludo]

Also, I just noticed that I missed this in the dark mode review:

Is there a reason to create the spinner "by hand" in JS instead of just having it as a hidden element in the _raw.html file? It looks like that would be way easier

[noworneverev]

Also, I just noticed that I missed this in the dark mode review:

Is there a reason to create the spinner "by hand" in JS instead of just having it as a hidden element in the _raw.html file? It looks like that would be way easier

Good point, I move it to _raw.html.

[noworneverev]

In principal I like this idea, but I think there's an easier way.

window.addEventListener("beforeunload", () => {
    showLoader();
});

This is all you need. However, I think we could make it even nicer by only showing the spinner after a short delay:

window.addEventListener("beforeunload", () => {
    const TIMEOUT = 200;
    setTimeout(showLoader, TIMEOUT);
});

In my testing, values as low as 100 worked so that for normal page loads, the spinner was never shown, but for heavy ones (like the patient list) it still looks to the user as if the spinner is shown instantly.

You can even change the theme switch button to be a normal a element with a href to your theme switcher view, and this will also show the spinner for that!

One other thing, the spinner is a bit hard to see, could you give it a nice background?

Done