christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Skeleton: Fix z-indices so the loading indicator is visible

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-17 18:03:16 +01:00
parent eedc7f9a85
commit b1bea37e20
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/LazyImage.svelte
View File

@ -36,6 +36,8 @@
load = true; load = true;
}; };
// Once the image component is mounted (e.g. when the image has loaded),
// transition the opacity to fade-in the image
const img_opacity_handler = (node: HTMLElement) => { const img_opacity_handler = (node: HTMLElement) => {
setTimeout(() => (node.style.opacity = "1"), 20); setTimeout(() => (node.style.opacity = "1"), 20);
}; };

4
src/routes/+layout.svelte
View File

@ -114,7 +114,7 @@
<LoadingIndicator /> <LoadingIndicator />
<Drawer> <Drawer zIndex="z-30">
<!-- Use p-3 because the drawer has a 5px overlap with the navbar --> <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
{#if $drawerStore.id === "menu_drawer"} {#if $drawerStore.id === "menu_drawer"}
<!-- Menu Drawer --> <!-- Menu Drawer -->
@ -216,7 +216,7 @@
</Drawer> </Drawer>
<nav> <nav>
<div class="fixed left-0 right-0 top-0 z-50"> <div class="fixed left-0 right-0 top-0 z-40">
<AppBar <AppBar
slotDefault="place-self-center" slotDefault="place-self-center"
slotTrail="place-content-end" slotTrail="place-content-end"