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! 🐳

[benmccann]

That's massively faster! Almost 20x faster by my calculations actually 🚀 🎉 Thank you x100!!!

[lastzero]

Note that's we've also added gzip support. To enable it, set PHOTOPRISM_HTTP_COMPRESSION to gzip. Other algorithms like Brotli may be added later.

ZIP files and JPEGs won't be compressed again for the obvious reason. JSON responses may be up to 10x smaller.