UX / Perf: Vue photo components performance cause spinners

[benmccann]

Thanks for all the help with reviewing my PRs and caching improvements! And I just installed the offline PWA that you made! Woohoo!

The site's feeling relatively decent speed. I'm often seeing loading indicators and I always expected this was slow fetching of files over the network, but now with all the caching I think it's just an animation that's appearing eventhough it's probably not really having to wait for anything. I have both my wifi and cell network turned off, so it must be loading the images from offline and should be instant, but I have to wait for the spinner which makes it feel slower even though I think it's not actually waiting.

[lastzero]

Also thought about this, but not a high priority issue from my point of view. Might help users with a slow connection.

[lastzero]

Guess the spinners are more of a "performance" issue on slow clients such as mobile phones. Barely see them on my iMac in Chrome.

[benmccann]

I think this is unrelated to connection speed and it's not waiting on the network at all. I think this is caused by Vue / JS taking a long time to run. I would guess that it shows up more on mobile clients though since they have slower CPUs. I'm on a 5-6 year old Thinkpad. I recently ordered a new computer - but it's on backorder 😄 The spinners were running for 8 seconds on my machine - though most of that is because I had Chrome's performance tools up. It's probably more like 1-2s normally. But based off this it looks like lots of scripting occurring. I wish I knew Vue better, so I could understand more what's happening

[lastzero]

If I can keep my eyes open, I'll improve it for you... actually wanted to take a look at scroll performance right now... we'll never have to worry about people "stealing" our code, because no one else will be able to maintain it with all these optimizations 🤣

[benmccann]

Thanks! That'd be great. It does seem like this and #500 could be quite related

[lastzero]

Removed in master and develop for testing.

[lastzero]

Found another, hidden loading transition that I could disable. In addition, UI state is now managed via CSS. Old school, but many times faster:

Can't push this yet as it's just a proof-of-concept. Needs more testing. The other views have to be refactored as well.

[benmccann]

Wow!! Amazing! Thanks once again!

I will be very curious to learn what resulted in the speed improvement since I don't know Vue as well as I know vanilla JS. Was there JS that was resizing the elements? Or was it the fact that there was one Vue component for each picture?

[lastzero]

Pushed my changes, only tested on Chrome so far. Let us know if this works for you! 🐳