My scenario is that I have a menu that loads pages on my SPA when an item is clicked. Right now it is rather fast (.1s with cache and ~.3s when not cached). However I expect this time to rise in production, specially in cases when the users's internet speed is slow. This is my page as is:
Highlighted in orange is the space where the pages are loaded. I wonder if I should use a loading state, which I'm very inclined to base on the heuristic of system status. However, which one? I don't want to implement a complex loading state if not necessary. Luke Wrobleski wrote an article back in 2013 about avoiding spinners and the usage of skeleton Pages, which are now most everywhere. Bill Chung performed research on user experience comaring spinners and with skeleton pages (see in Everything you need to know about skeleton screens).
I will most certainly use skeletons for the individual components of the page that has data fetching. However, is it too overkill for this idle time between a user clicking a link to a page and it being loaded? If so, what's the best approach? I'm overthinking this too much and maybe a simple spinner would do the trick without impacting the user?