Add "loading" indicator for navigation

Currently all routes are dynamically imported components, so when you navigate it takes time to load the component. But there is no indication whatsoever that something is happening.

A simple solution is to add a progress bar, like NProgress: slim progress bars in JavaScript

1 Like

I like that. I was using a similar library (pace.js but seems more bloated) for this feelingly 1000 years ago.

In order to implement this I would probably try to incorporate that lib / rebuild it in Vue.js. The CSS code is really simple so it shouldn’t be that complex. For example there is an unmerged next version pull request from the original author and there might even be good active forks.

Couldn’t we use vue.js’s transitions for that?

And shouldn’t all components get cached by the service worker anyway so that the loading of them happensnpretty much instantly?

Right. Forgot about that.

Good point. I encountered this on a test build with caching disabled, so yeah, it probably doesn’t actually happen too often IRL.

Adding vue router view transitions with via vue transitions makes sense. I think I added simple fade transitions in the modal branch. Might be that that’s in a part that I never pushed.

I see the pace indicated as something different. Depending on the view we need load stuff from the server. Even if the views themselves are cached. If you have unstable internet - mobile - it‘s always good to have some indicator for activity.

Do you mean the loading of the component itself? All API requests already have a loading spinner.