DEV: Use `performance.timing` as a baseline for the splash (#17275)
* update styles * remove unused code * use request time as a baseline
This commit is contained in:
parent
6ecfdc8f55
commit
6146da5eb7
|
@ -81,15 +81,6 @@ const Discourse = Application.extend({
|
|||
initialize: () => withPluginApi(cb.version, cb.code),
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener(
|
||||
"load",
|
||||
() => {
|
||||
// The app booted. Remove the splash screen
|
||||
document.querySelector("#d-splash")?.remove();
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
},
|
||||
|
||||
_registerPluginCode(version, code) {
|
||||
|
|
|
@ -9,13 +9,14 @@
|
|||
display: grid;
|
||||
place-items: center;
|
||||
backface-visibility: hidden;
|
||||
background: var(--secondary);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1001; /* above the header */
|
||||
background: var(--secondary);
|
||||
z-index: 1001;
|
||||
--animation-state: paused;
|
||||
}
|
||||
|
||||
#d-splash .preloader-image {
|
||||
|
@ -25,22 +26,26 @@
|
|||
|
||||
#d-splash .preloader-text {
|
||||
padding-top: 4em;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
animation: fade-in 0.5s ease-in-out;
|
||||
animation-delay: 2.5s;
|
||||
animation-fill-mode: forwards;
|
||||
color: var(--primary);
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
animation: fade-in 0.5s ease-in-out;
|
||||
animation-delay: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-play-state: var(--animation-state);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#d-splash .preloader-text:after {
|
||||
animation: loading-text 3s infinite;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
margin: 0 0.1em;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.rtl #d-splash .preloader-text:after {
|
||||
left: 0;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
|
@ -71,7 +76,7 @@
|
|||
|
||||
<img
|
||||
class="preloader-image"
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' data-ember-extension='1'%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; %7D /* these styles need to live here because the SVG has a different scope */ .dots %7B animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; animation-delay: 1.5s; stroke: %23fff; stroke-width: 0.5px; transform-origin: center; opacity: 0; r: max(1vw, 11px); cy: 50%25; %7D .dots:first-child %7B fill: var(--tertiary); animation-delay: 1.25s; %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 1.35s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 1.45s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 1.55s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 1.65s; %7D @keyframes loader %7B 0%25 %7B opacity: 0; transform: scale(1); %7D 45%25 %7B opacity: 1; transform: scale(0.7); %7D 65%25 %7B opacity: 1; transform: scale(0.7); %7D 100%25 %7B opacity: 0; transform: scale(1); %7D %7D %3C/style%3E%3Cg class='container'%3E%3Ccircle class='dots' cx='30vw'/%3E%3Ccircle class='dots' cx='40vw'/%3E%3Ccircle class='dots' cx='50vw'/%3E%3Ccircle class='dots' cx='60vw'/%3E%3Ccircle class='dots' cx='70vw'/%3E%3C/g%3E%3C/svg%3E%0A"
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%0A%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; --animation-state: paused; %7D /* these styles need to live here because the SVG has a different scope */ .dots %7B animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; animation-play-state: var(--animation-state); stroke: %23fff; stroke-width: 0.5px; transform-origin: center; opacity: 0; r: max(1vw, 11px); cy: 50%25; %7D .dots:first-child %7B fill: var(--tertiary); %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 0.15s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 0.3s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 0.45s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 0.6s; %7D @keyframes loader %7B 0%25 %7B opacity: 0; transform: scale(1); %7D 45%25 %7B opacity: 1; transform: scale(0.7); %7D 65%25 %7B opacity: 1; transform: scale(0.7); %7D 100%25 %7B opacity: 0; transform: scale(1); %7D %7D %3C/style%3E%3Cg class='container'%3E%3Ccircle class='dots' cx='30vw' /%3E%3Ccircle class='dots' cx='40vw' /%3E%3Ccircle class='dots' cx='50vw' /%3E%3Ccircle class='dots' cx='60vw' /%3E%3Ccircle class='dots' cx='70vw' /%3E%3C/g%3E%3C/svg%3E%0A"
|
||||
alt="<%=SiteSetting.title%>"
|
||||
/>
|
||||
|
||||
|
@ -90,5 +95,56 @@
|
|||
}
|
||||
</style>
|
||||
</noscript>
|
||||
|
||||
<script>
|
||||
const connectStart = performance?.timing?.connectStart || 0;
|
||||
|
||||
const SPLASH_DELAY = connectStart ? 2000 : 0;
|
||||
const POLLING_INTERVAL = 50;
|
||||
|
||||
const targetTime = connectStart + SPLASH_DELAY;
|
||||
const splashWrapper = document.querySelector("#d-splash");
|
||||
const image = splashWrapper?.querySelector(".preloader-image");
|
||||
|
||||
let splashInterval;
|
||||
let windowLoaded;
|
||||
|
||||
const swapSplash = () => {
|
||||
splashWrapper?.style.setProperty("--animation-state", "running");
|
||||
|
||||
image.src = image.src.replace(
|
||||
"--animation-state: paused;",
|
||||
"--animation-state: running;"
|
||||
);
|
||||
|
||||
clearSplashInterval();
|
||||
};
|
||||
|
||||
const clearSplashInterval = () => {
|
||||
clearInterval(splashInterval);
|
||||
splashInterval = null;
|
||||
};
|
||||
|
||||
(() => {
|
||||
splashInterval = setInterval(() => {
|
||||
if (windowLoaded) {
|
||||
clearSplashInterval();
|
||||
}
|
||||
|
||||
if (Date.now() > targetTime) {
|
||||
swapSplash();
|
||||
}
|
||||
}, POLLING_INTERVAL);
|
||||
})();
|
||||
|
||||
window.addEventListener(
|
||||
"load",
|
||||
() => {
|
||||
windowLoaded = true;
|
||||
splashWrapper?.remove();
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
</script>
|
||||
</section>
|
||||
<%- end %>
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" data-ember-extension="1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
>
|
||||
<style>
|
||||
|
||||
/* these need to be injected dynamicly to match theme colors */
|
||||
:root {
|
||||
--primary: #222222;
|
||||
|
@ -9,6 +12,7 @@
|
|||
--highlight: #f0ea88;
|
||||
--quaternary: #65ccff;
|
||||
--success: #009900;
|
||||
--animation-state: paused;
|
||||
}
|
||||
|
||||
/* these styles need to live here because the SVG has a different scope */
|
||||
|
@ -17,7 +21,7 @@
|
|||
animation-timing-function: ease-in-out;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1.5s;
|
||||
animation-play-state: var(--animation-state);
|
||||
stroke: #fff;
|
||||
stroke-width: 0.5px;
|
||||
transform-origin: center;
|
||||
|
@ -28,27 +32,26 @@
|
|||
|
||||
.dots:first-child {
|
||||
fill: var(--tertiary);
|
||||
animation-delay: 1.25s;
|
||||
}
|
||||
|
||||
.dots:nth-child(2) {
|
||||
fill: var(--tertiary);
|
||||
animation-delay: 1.35s;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.dots:nth-child(3) {
|
||||
fill: var(--highlight);
|
||||
animation-delay: 1.45s;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.dots:nth-child(4) {
|
||||
fill: var(--quaternary);
|
||||
animation-delay: 1.55s;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
|
||||
.dots:nth-child(5) {
|
||||
fill: var(--quaternary);
|
||||
animation-delay: 1.65s;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
|
@ -72,10 +75,10 @@
|
|||
</style>
|
||||
|
||||
<g class="container">
|
||||
<circle class="dots" cx="30vw"/>
|
||||
<circle class="dots" cx="40vw"/>
|
||||
<circle class="dots" cx="50vw"/>
|
||||
<circle class="dots" cx="60vw"/>
|
||||
<circle class="dots" cx="70vw"/>
|
||||
<circle class="dots" cx="30vw" />
|
||||
<circle class="dots" cx="40vw" />
|
||||
<circle class="dots" cx="50vw" />
|
||||
<circle class="dots" cx="60vw" />
|
||||
<circle class="dots" cx="70vw" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in New Issue