feat: loading screen, initSDK on bootstrap, fix FOUC for theme #10350
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This PR conflicts with #10335, correct? |
jrasm91
approved these changes
Jun 16, 2024
|
Thanks, @midzelis, for the PR; I just tried to run the PR, and I like it! I have some thoughts.
I think the pulsating Immich logo would be better. |
|
The last commit adds the immich logo instead of spinner. Using a pulsing effect, which an expanding drop shadow filter, and slightly expanding logo, which looks kinda cool - but I'm not an artist. @alextran1502 I see what your saying about defaulting to system - it does hide the theme chooser in the bar. I agree it should be there by default. Instead, what if - don't set a preference at all at bootstrap - just read it, and use it if present. However, if it isn't present, choose the default system color (dark/light) - but don't save it. Because its not saved, the default behavior of the theme chooser is to show up. That means you will see dark if you're system is dark, but you also see the theme chooser. Likewise, if your system is light, you'll see light, and the chooser. When you go to preference, you'll see that system is unchecked. The next time you change that preference in settings, or if you flip the theme from dark/light - that will be persisted in local storage. This is a compromise, and I think its a pretty decent "default" behavior, but if you want it to be light/not system by default, thats easy too - just a single line of code. |
light.movdark.mov |
calvinbui
added a commit
to calvinbui/ansible-monorepo
that referenced
this pull request
Sep 1, 2024
…0 (#2857) This PR contains the following updates: | Package | Update | Change | |---|---|---| | [ghcr.io/immich-app/immich-machine-learning](https://github.com/immich-app/immich) | minor | `v1.112.1-cuda` -> `v1.113.0-cuda` | | [ghcr.io/immich-app/immich-server](https://github.com/immich-app/immich) | minor | `v1.112.1` -> `v1.113.0` | --- ### Release Notes <details> <summary>immich-app/immich (ghcr.io/immich-app/immich-machine-learning)</summary> ### [`v1.113.0`](https://github.com/immich-app/immich/releases/tag/v1.113.0) [Compare Source](immich-app/immich@v1.112.1...v1.113.0) ##### v1.113.0 > \[!WARNING] > > ## Breaking changes > > For **OAuth users**, please replace `app.immich:/` with `app.immich:///oauth-callback` for the Redirect URI in your OAuth provider settings ##### Highlights Welcome to release `v1.113.0` of Immich! This is one of the biggest releases yet, introducing some of the most requested features since the early days of Immich. Let's dive right into what we have in place for this release: - Folder view - Tags - Timeline improvements - Library refresh stability - Mobile album sync ##### Folder view You can now browse your photos and videos by folder like in a file explorer. You can use the storage template migration feature for the best experience with uploaded assets in this view. This feature is especially useful for scanned photos, which are difficult to put in a timeline. It has been a long-requested feature. You can enable this feature from the `Users Settings > Features > Folders`.  The UI is currently only available for the web; mobile will come in a subsequent release.   ##### Tags Immich now supports hierarchical tags, with the ability to read existing tags from the `TagList` and `Keywords` exif properties. Any changes to tags made through Immich are also written back to a sidecar file. You can re-run the metadata extraction jobs for all assets to import your existing tags. You can enable this feature from the `Users Settings > Features > Tags`.  The UI is currently only available for the web; mobile will come in a subsequent release. https://github.com/user-attachments/assets/d543f531-4b0e-4dcf-8918-e76c7f1b288b ##### Timeline improvements This release introduces a rewrite of the web timeline component. It can now handle a large number of assets in a single day or month and has been successfully tested with a very large data set (over a million assets). Photographers frequently request this since they can easily take thousands of photos in a given day. With these performance improvements, you'll see fewer placeholders while loading, which will make for a more fluid scrolling and scrubbing experience. ##### Library refresh stability In relation to the previous point, the stability of library scanning has improved. Previously, you could run out of memory when starting a refresh with libraries containing millions of assets. Now, we queue the refresh jobs in batches. These enhancements won't make scanning go any faster, but they greatly reduce the likelihood of out-of-memory errors that would cause Immich to crash. ##### Mobile album sync You can now sync or mirror an album from your phone to the Immich server on your account. For example, if you select `Recents`, `Camera` and `Videos` album for backup, the corresponding album with the same name will be created on the server. Once the assets from those albums are uploaded, they will be put into the target albums automatically. You can enable this feature from the album selection in the backup screen. <img src="https://github.com/user-attachments/assets/67b329f5-15ff-4128-af52-4a50df852a07" width="300" alt="sync-album"/> For existing installations, you can sync the already uploaded assets by going to the backup screen and pressing the `Sync` button. <img src="https://github.com/user-attachments/assets/ca0847fd-edab-4ebe-b8e1-093ce7e3cc37" width="300" alt="sync-button"/> Have a wonderful weekend, Cheers! *** ##### Support Immich <p align="center"> <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbjY2eWc5Y2F0ZW56MmR4aWE0dDhzZXlidXRmYWZyajl1bWZidXZpcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/87CKDqErVfMqY/giphy.gif" width="450" title="SUPPORT THE PROJECT!"> </p> If you find the project helpful, you can support Immich by purchasing a product key at <https://buy.immich.app>. Cheers! 🍻 <!-- Release notes generated using configuration in .github/release.yml at main --> ##### What's Changed ##### 🚨 Breaking Changes - feat(server): granular permissions for api keys by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#11824 - refactor(server): stacks by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#11453 - fix(server): album statistics endpoint by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#11924 - fix: remove `asset.resized` by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#11983 - fix(mobile): use a valid OAuth callback URL by [@​qrkourier](https://github.com/qrkourier) in immich-app/immich#10832 ##### 🚀 Features - feat: folder view by [@​davidakerr](https://github.com/davidakerr) in immich-app/immich#11880 - feat(web): Scroll to asset in gridview; increase gridview perf; reduce memory; scrollbar ticks in fixed position by [@​midzelis](https://github.com/midzelis) in immich-app/immich#10646 - feat: loading screen, initSDK on bootstrap, fix FOUC for theme by [@​midzelis](https://github.com/midzelis) in immich-app/immich#10350 - feat(mobile): preserve mobile album info on upload by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#11965 - feat: tags by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#11980 - feat(web): jump to timeline by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#12117 ##### 🌟 Enhancements - feat(server): do not automatically download android motion videos by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#11774 - feat(web): pasting coordinates by [@​michelheusschen](https://github.com/michelheusschen) in immich-app/immich#11866 - feat(web): drag and drop or paste directories for upload by [@​simkli](https://github.com/simkli) in immich-app/immich#11879 - feat(web): Left hand navigation for memories by [@​carlesalbasboix](https://github.com/carlesalbasboix) in immich-app/immich#11913 - feat(web): my immich shortcut by [@​danieldietzler](https://github.com/danieldietzler) in immich-app/immich#12007 - fix(web): show a clearer confirmation message when deleting an unnamed album by [@​Snowknight26](https://github.com/Snowknight26) in immich-app/immich#11988 - feat(format): nrw format by [@​avsm](https://github.com/avsm) in immich-app/immich#12048 - feat(web): restore scroll position on navigating back to search page by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#12042 - feat(server): Storage template support album condition by [@​feyst](https://github.com/feyst) in immich-app/immich#12000 - fix(mobile): Changes in the UI for the image editor pages by [@​Yuvi-raj-P](https://github.com/Yuvi-raj-P) in immich-app/immich#12018 - feat(web): announce notifications to screen readers by [@​ben-basten](https://github.com/ben-basten) in immich-app/immich#12071 - fix(server): don't crash when refreshing large libraries by [@​etnoy](https://github.com/etnoy) in immich-app/immich#7934 - feat(server): sort images in duplicate groups by date by [@​GeoffreyFrogeye](https://github.com/GeoffreyFrogeye) in immich-app/immich#12094 - feat(ml): support dynamic scaling by [@​rkojedzinszky](https://github.com/rkojedzinszky) in immich-app/immich#12065 - feat(web): navigate assets with gestures (next/prev) by [@​kaziu687](https://github.com/kaziu687) in immich-app/immich#11888 - fix(mobile): allow create empty non-shared albums, add proper button colors by [@​src52](https://github.com/src52) in immich-app/immich#12103 - feat: user's features preferences by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#12099 - chore(server): log path when generating external thumbnail by [@​etnoy](https://github.com/etnoy) in immich-app/immich#12107 ##### 🐛 Bug fixes - fix(web): focus trap inside portal by [@​michelheusschen](https://github.com/michelheusschen) in immich-app/immich#11797 - fix(mobile): show correct notification icon for android by [@​karthikraja001](https://github.com/karthikraja001) in immich-app/immich#11863 - fix(web): show camera make in search options after searching by [@​michelheusschen](https://github.com/michelheusschen) in immich-app/immich#11884 - fix(web): correctly populate the camera model search dropdown by [@​Snowknight26](https://github.com/Snowknight26) in immich-app/immich#11883 - fix(server): create shared album from the mobile app does not trigger send email invite by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#11911 - fix(server): do not match live photos across libraries by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#11952 - fix(web): rating stars accessibility by [@​ben-basten](https://github.com/ben-basten) in immich-app/immich#11966 - fix(mobile): Fix for incorrectly naming edited files and structure change by [@​Yuvi-raj-P](https://github.com/Yuvi-raj-P) in immich-app/immich#11741 - fix: align camera model drop down behavior with other drop downs on web and mobile by [@​x24git](https://github.com/x24git) in immich-app/immich#11951 - fix(web): announce current theme to screen reader users by [@​ben-basten](https://github.com/ben-basten) in immich-app/immich#12039 - fix(web): show supporter badge for account less than 14 days by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#12058 - fix(web): shared link expiration date accessibility by [@​ben-basten](https://github.com/ben-basten) in immich-app/immich#12060 - chore(web): ignore shortcut toggle when entering email and password by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#12082 - chore(web): ensure goto is awaited for login page by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#12087 - fix(server): ensure new exclusion patterns work by [@​etnoy](https://github.com/etnoy) in immich-app/immich#12102 - fix(server): skip smtp validation if unchanged by [@​michelheusschen](https://github.com/michelheusschen) in immich-app/immich#12111 - fix(mobile): long waiting time for login request when server is unreachable by [@​alextran1502](https://github.com/alextran1502) in immich-app/immich#12100 - fix: user specific fields in asset search by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#12125 - fix(web): Device list shows Ubuntu as unknown OS by [@​spfncer](https://github.com/spfncer) in immich-app/immich#12127 - fix(web): reset asset grid after changing album order by [@​michelheusschen](https://github.com/michelheusschen) in immich-app/immich#12139 ##### 📚 Documentation - fix(docs): read-only affects XMP writing by [@​C-Otto](https://github.com/C-Otto) in immich-app/immich#11823 - docs: clarify external domain setting by [@​pikapower9080](https://github.com/pikapower9080) in immich-app/immich#11958 - docs: add Immich Kiosk and Immich Power Tools to Community Projects by [@​Tyree](https://github.com/Tyree) in immich-app/immich#12055 - docs: mTLS/self signed FAQ entry by [@​mmomjian](https://github.com/mmomjian) in immich-app/immich#12074 - docs: external library deletion/edits by [@​mmomjian](https://github.com/mmomjian) in immich-app/immich#12079 - docs: sql query for duplicate files by [@​mmomjian](https://github.com/mmomjian) in immich-app/immich#12086 - docs: Documentation updates by [@​aviv926](https://github.com/aviv926) in immich-app/immich#11516 - docs: update roadmap by [@​jrasm91](https://github.com/jrasm91) in immich-app/immich#12126 - fix: README_zh_CN.md link by [@​ttzytt](https://github.com/ttzytt) in immich-app/immich#12124 - docs(guide): nginx caching proxy by [@​pcouy](https://github.com/pcouy) in immich-app/immich#12140 ##### New Contributors - [@​aaronjrodrigues](https://github.com/aaronjrodrigues) made their first contribution in immich-app/immich#11851 - [@​karthikraja001](https://github.com/karthikraja001) made their first contribution in immich-app/immich#11863 - [@​simkli](https://github.com/simkli) made their first contribution in immich-app/immich#11879 - [@​carlesalbasboix](https://github.com/carlesalbasboix) made their first contribution in immich-app/immich#11907 - [@​pikapower9080](https://github.com/pikapower9080) made their first contribution in immich-app/immich#11958 - [@​davidakerr](https://github.com/davidakerr) made their first contribution in immich-app/immich#11880 - [@​x24git](https://github.com/x24git) made their first contribution in immich-app/immich#11951 - [@​Tonux599](https://github.com/Tonux599) made their first contribution in immich-app/immich#12027 - [@​avsm](https://github.com/avsm) made their first contribution in immich-app/immich#12048 - [@​Tyree](https://github.com/Tyree) made their first contribution in immich-app/immich#12055 - [@​feyst](https://github.com/feyst) made their first contribution in immich-app/immich#12000 - [@​Tiefseetauchner](https://github.com/Tiefseetauchner) made their first contribution in immich-app/immich#11874 - [@​qrkourier](https://github.com/qrkourier) made their first contribution in immich-app/immich#10832 - [@​GeoffreyFrogeye](https://github.com/GeoffreyFrogeye) made their first contribution in immich-app/immich#12094 - [@​rkojedzinszky](https://github.com/rkojedzinszky) made their first contribution in immich-app/immich#12065 - [@​kaziu687](https://github.com/kaziu687) made their first contribution in immich-app/immich#11888 - [@​src52](https://github.com/src52) made their first contribution in immich-app/immich#12103 - [@​spfncer](https://github.com/spfncer) made their first contribution in immich-app/immich#12127 - [@​ttzytt](https://github.com/ttzytt) made their first contribution in immich-app/immich#12124 **Full Changelog**: https://github.com/immich-app/immich/compare/v1.112.1... </details> --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC41OC4wIiwidXBkYXRlZEluVmVyIjoiMzguNTguMCIsInRhcmdldEJyYW5jaCI6Im1hc3RlciIsImxhYmVscyI6W119--> Co-authored-by: Renovate Bot <[email protected]> Co-authored-by: Calvin Bui <[email protected]> Reviewed-on: https://gitea.bui.ng/calvinbui/ansible-monorepo/pulls/2857 Co-authored-by: renovate <[email protected]> Co-committed-by: renovate <[email protected]>
da-anda
reviewed
Sep 16, 2024
| if (!theme) { | ||
| theme = { value: 'light', system: true }; | ||
| } else if (theme === 'dark' || theme === 'light') { | ||
| theme = { value: item, system: false }; |
There was a problem hiding this comment.
this line causes a JavaScript error item is undefined and one is unable to login. I suppose this was supposed to be value: theme?
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds a loading screen, which is just the spinner right now. This will be shown while all the .js and .css resources are being loaded. It will only show after .3 seconds, to prevent a flicker for quickly loading apps (previously cached) but will still show some loading indicator for slower starts (first time, slow network, etc)
The theme initialization code was rewritten to be a little clearer, and a little more efficient. There appeared to handling to 'upgrade' the format of an old theme key in localstorage (which was just a string) to a json object - I left this in for now, but probably can remove in near future.
The "default" theme, when the app has never been loaded before (no localstorage) is now light, but use system prefs, instead of dark, don't use system prefs. This is probably closer to what people would want - but this could go back to dark-by default.
Fix: The "dark" class was removed from the "html" element, since it was set/unset on the document element by the theme changer.
Fix: FOUC still happened because the tailwind css doesn't get loaded until much later - and on slow connections or initial loads, this is obvious. So, to fix that, I added some minimal inline styles so that the background would at least be styled before tailwind loads.
The same styles names are used, but they appear early in the DOM tree, so that when tailscale loads, injecting the stylesheet at the end of the
<head>element, it will override the earlier css declarations.Additionally, the loading spinner was added as a inline-svg, as well as the animation css to make it spin. This spinner is removed by the root +layout.svelte during onMount().
Thoughts: The spinner is 1300 bytes - the immich logo is ~1900 bytes - perhaps we could use the immich logo (pulsating?) as a load screen?
Changes in root +layout.ts and +page.ts - it appears that svelte races all the load functions: so either +layout .load() and +page .load() will run in parallel. Technically, layout.load() will run first, but if it starts to await an async method, the +page.ts load() will start to run. To that end, I refactored the initialization of the SDK (setting defaults.fetch) into a shared function, and I call it from both load functions. I also wrap all the initializers of the layout load() function in a try/catch, because if the layout itself throws an error, then the error page can not be shown, since the error page also requires the layout. Instead, save the error in the page data object, and display it in the layout. I also moved the loadConfig() function from the layout mount to be in the layout load() since that really is a non-template loader, and it should not be part of the layout component - it really does belong in the load function.
Future work - the page load() function uses the $t() localized string lookup, but the layout load() is the place where it is initialized. If you call $t() before calling init(), the svelte-18n throws. It would be nice to have a single util that can do all of the bootstrap initialization can be performed - and it would be invoked by both the page and layout load() functions, and can lead to some performance improvements - since layout calls "loadConfig()" and page calls "getServerConfig()" which end up calling that same endpoint twice during startup.