feat: loading screen, initSDK on bootstrap, fix FOUC for theme (#10350)
* feat: loading screen, initSDK on bootstrap, fix FOUC for theme * pulsate immich logo, don't set localstorage * Make it spin * Rework error handling a bit * Cleanup * fix test * rename, memoize --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis
+135
-21
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="dark">
|
||||
<html>
|
||||
<head>
|
||||
<!-- (used for SSR) -->
|
||||
<!-- metadata:tags -->
|
||||
@@ -14,35 +14,96 @@
|
||||
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180.png" />
|
||||
%sveltekit.head%
|
||||
<style>
|
||||
/* prevent FOUC */
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@keyframes delayedVisibility {
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@keyframes stencil-pulse {
|
||||
0% {
|
||||
transform: scale(0.93);
|
||||
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.7));
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.93);
|
||||
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
|
||||
}
|
||||
}
|
||||
@keyframes loadspin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
#stencil svg {
|
||||
height: 35%;
|
||||
animation: stencil-pulse 1s linear infinite;
|
||||
}
|
||||
#stencil {
|
||||
--stencil-width: 25vw;
|
||||
display: flex;
|
||||
width: var(--stencil-width);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: calc(50vh - var(--stencil-width) / 2);
|
||||
margin-bottom: 100vh;
|
||||
place-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
animation:
|
||||
0s linear 0.3s forwards delayedVisibility,
|
||||
loadspin 2s linear infinite;
|
||||
}
|
||||
.bg-immich-bg {
|
||||
background-color: white;
|
||||
}
|
||||
.dark .dark\:bg-immich-dark-bg {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
/**
|
||||
* Prevent FOUC on page load.
|
||||
*/
|
||||
const colorThemeKeyName = 'color-theme';
|
||||
let theme;
|
||||
const fallbackTheme = { value: 'dark', system: false };
|
||||
let item = localStorage.getItem(colorThemeKeyName);
|
||||
if (item === 'dark' || item === 'light') {
|
||||
fallbackTheme.value = item;
|
||||
item = JSON.stringify(fallbackTheme);
|
||||
localStorage.setItem(colorThemeKeyName, item);
|
||||
}
|
||||
|
||||
theme = JSON.parse(localStorage.getItem(colorThemeKeyName));
|
||||
|
||||
if (theme) {
|
||||
if (theme.system) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme.value = 'dark';
|
||||
} else {
|
||||
theme.value = 'light';
|
||||
}
|
||||
}
|
||||
let theme = localStorage.getItem(colorThemeKeyName);
|
||||
if (!theme) {
|
||||
theme = { value: 'light', system: true };
|
||||
} else if (theme === 'dark' || theme === 'light') {
|
||||
theme = { value: item, system: false };
|
||||
localStorage.setItem(colorThemeKeyName, JSON.stringify(theme));
|
||||
} else {
|
||||
theme = fallbackTheme;
|
||||
theme = JSON.parse(theme);
|
||||
}
|
||||
|
||||
if (theme.value === 'light') {
|
||||
let themeValue = theme.value;
|
||||
if (theme.system) {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
themeValue = 'dark';
|
||||
} else {
|
||||
themeValue = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
if (themeValue === 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
@@ -53,6 +114,59 @@
|
||||
</head>
|
||||
|
||||
<body class="bg-immich-bg dark:bg-immich-dark-bg">
|
||||
<div id="stencil">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792">
|
||||
<style type="text/css">
|
||||
.st0 {
|
||||
fill: #fa2921;
|
||||
}
|
||||
.st1 {
|
||||
fill: #ed79b5;
|
||||
}
|
||||
.st2 {
|
||||
fill: #ffb400;
|
||||
}
|
||||
.st3 {
|
||||
fill: #1e83f7;
|
||||
}
|
||||
.st4 {
|
||||
fill: #18c249;
|
||||
}
|
||||
</style>
|
||||
<g>
|
||||
<path
|
||||
class="st0"
|
||||
d="M375.48,267.63c38.64,34.21,69.78,70.87,89.82,105.42c34.42-61.56,57.42-134.71,57.71-181.3
|
||||
c0-0.33,0-0.63,0-0.91c0-68.94-68.77-95.77-128.01-95.77s-128.01,26.83-128.01,95.77c0,0.94,0,2.2,0,3.72
|
||||
C300.01,209.24,339.15,235.47,375.48,267.63z"
|
||||
/>
|
||||
<path
|
||||
class="st1"
|
||||
d="M164.7,455.63c24.15-26.87,61.2-55.99,103.01-80.61c44.48-26.18,88.97-44.47,128.02-52.84
|
||||
c-47.91-51.76-110.37-96.24-154.6-110.91c-0.31-0.1-0.6-0.19-0.86-0.28c-65.57-21.3-112.34,35.81-130.64,92.15
|
||||
c-18.3,56.34-14.04,130.04,51.53,151.34C162.05,454.77,163.25,455.16,164.7,455.63z"
|
||||
/>
|
||||
<path
|
||||
class="st2"
|
||||
d="M681.07,302.19c-18.3-56.34-65.07-113.45-130.64-92.15c-0.9,0.29-2.1,0.68-3.54,1.15
|
||||
c-3.75,35.93-16.6,81.27-35.96,125.76c-20.59,47.32-45.84,88.27-72.51,118c69.18,13.72,145.86,12.98,190.26-1.14
|
||||
c0.31-0.1,0.6-0.2,0.86-0.28C695.11,432.22,699.37,358.52,681.07,302.19z"
|
||||
/>
|
||||
<path
|
||||
class="st3"
|
||||
d="M336.54,510.71c-11.15-50.39-14.8-98.36-10.7-138.08c-64.03,29.57-125.63,75.23-153.26,112.76
|
||||
c-0.19,0.26-0.37,0.51-0.53,0.73c-40.52,55.78-0.66,117.91,47.27,152.72c47.92,34.82,119.33,53.54,159.86-2.24
|
||||
c0.56-0.76,1.3-1.78,2.19-3.01C363.28,602.32,347.02,558.08,336.54,510.71z"
|
||||
/>
|
||||
<path
|
||||
class="st4"
|
||||
d="M617.57,482.52c-35.33,7.54-82.42,9.33-130.72,4.66c-51.37-4.96-98.11-16.32-134.63-32.5
|
||||
c8.33,70.03,32.73,142.73,59.88,180.6c0.19,0.26,0.37,0.51,0.53,0.73c40.52,55.78,111.93,37.06,159.86,2.24
|
||||
c47.92-34.82,87.79-96.95,47.27-152.72C619.2,484.77,618.46,483.75,617.57,482.52z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user