glanceapp/glance
1
1
Fork 0
mirror of https://github.com/glanceapp/glance.git synced 2024-12-15 09:34:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

Reduce reliance on setTimeout shenanigans

Browse Source
This commit is contained in:
Svilen Markov 2024-05-18 18:42:23 +01:00
parent 21909e0bda
commit eeda28a287
2 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
internal/assets/static/main.css
View File

@ -190,11 +190,6 @@
background-color: var(--color-background); background-color: var(--color-background);
} }
/* required to prevent collapsed lazy images from being loaded while the container is being setup */
.collapsible-container:not(.ready) img[loading=lazy] {
display: none;
}
::selection { ::selection {
background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%))); background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%)));
color: var(--color-text-highlight); color: var(--color-text-highlight);
@ -282,7 +277,6 @@ body {
gap: var(--widget-gap); gap: var(--widget-gap);
margin: var(--widget-gap) 0; margin: var(--widget-gap) 0;
animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards; animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
animation-delay: 3ms;
} }
@keyframes pageColumnsEntrance { @keyframes pageColumnsEntrance {
@ -1011,10 +1005,10 @@ body {
.page-column { .page-column {
display: none; display: none;
animation: columnEntrance 0s cubic-bezier(0.25, 1, 0.5, 1) backwards; animation: columnEntrance .0s cubic-bezier(0.25, 1, 0.5, 1) backwards;
} }
.animate-element-transition .page-column { .page-columns-transitioned .page-column {
animation-duration: .3s; animation-duration: .3s;
} }

32
internal/assets/static/main.js
View File

@ -61,7 +61,7 @@ function setupCarousels() {
itemsContainer.addEventListener("scroll", determineSideCutoffsRateLimited); itemsContainer.addEventListener("scroll", determineSideCutoffsRateLimited);
document.addEventListener("resize", determineSideCutoffsRateLimited); document.addEventListener("resize", determineSideCutoffsRateLimited);
setTimeout(determineSideCutoffs, 1); afterContentReady(determineSideCutoffs);
} }
} }
@ -160,22 +160,22 @@ function setupLazyImages() {
image.classList.add("finished-transition"); image.classList.add("finished-transition");
} }
setTimeout(() => { afterContentReady(() => {
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
const image = images[i]; const image = images[i];
if (image.complete) { if (image.complete) {
image.classList.add("cached"); image.classList.add("cached");
setTimeout(() => imageFinishedTransition(image), 5); setTimeout(() => imageFinishedTransition(image), 1);
} else { } else {
// TODO: also handle error event // TODO: also handle error event
image.addEventListener("load", () => { image.addEventListener("load", () => {
image.classList.add("loaded"); image.classList.add("loaded");
setTimeout(() => imageFinishedTransition(image), 500); setTimeout(() => imageFinishedTransition(image), 400);
}); });
} }
} }
}, 5); });
} }
function attachExpandToggleButton(collapsibleContainer) { function attachExpandToggleButton(collapsibleContainer) {
@ -314,11 +314,11 @@ function setupCollapsibleGrids() {
} }
}; };
setTimeout(() => { afterContentReady(() => {
cardsPerRow = getCardsPerRow(); cardsPerRow = getCardsPerRow();
resolveCollapsibleItems(); resolveCollapsibleItems();
gridElement.classList.add("ready"); gridElement.classList.add("ready");
}, 1); });
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
const newCardsPerRow = getCardsPerRow(); const newCardsPerRow = getCardsPerRow();
@ -333,6 +333,12 @@ function setupCollapsibleGrids() {
} }
} }
const contentReadyCallbacks = [];
function afterContentReady(callback) {
contentReadyCallbacks.push(callback);
}
async function setupPage() { async function setupPage() {
const pageElement = document.getElementById("page"); const pageElement = document.getElementById("page");
const pageContentElement = document.getElementById("page-content"); const pageContentElement = document.getElementById("page-content");
@ -340,10 +346,6 @@ async function setupPage() {
pageContentElement.innerHTML = pageContent; pageContentElement.innerHTML = pageContent;
setTimeout(() => {
document.body.classList.add("animate-element-transition");
}, 200);
try { try {
setupLazyImages(); setupLazyImages();
setupCarousels(); setupCarousels();
@ -352,6 +354,14 @@ async function setupPage() {
setupDynamicRelativeTime(); setupDynamicRelativeTime();
} finally { } finally {
pageElement.classList.add("content-ready"); pageElement.classList.add("content-ready");
for (let i = 0; i < contentReadyCallbacks.length; i++) {
contentReadyCallbacks[i]();
}
setTimeout(() => {
document.body.classList.add("page-columns-transitioned");
}, 300);
} }
} }