extern/glance
1
0
Fork 0
mirror of https://github.com/glanceapp/glance.git synced 2024-10-05 01:32:00 +02: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);
}
/* 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 {
background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%)));
color: var(--color-text-highlight);
@ -282,7 +277,6 @@ body {
gap: var(--widget-gap);
margin: var(--widget-gap) 0;
animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
animation-delay: 3ms;
}
@keyframes pageColumnsEntrance {
@ -1011,10 +1005,10 @@ body {
.page-column {
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;
}

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

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