zias/serengo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:remove loader skeleton from main page when not logged in.

Browse Source
This commit is contained in:
ッ
2025-12-16 14:34:46 +01:00
parent 81645a453a
commit b7eb7ad1ad
1 changed files with 0 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/routes/+layout.svelte
View File

@@ -4,23 +4,12 @@
import { Header } from '$lib'; import { Header } from '$lib';
import { page } from '$app/state'; import { page } from '$app/state';
import { Toaster } from '$lib/components/sonner/index.js'; import { Toaster } from '$lib/components/sonner/index.js';
import { Skeleton } from '$lib/components/skeleton';
import LocationManager from '$lib/components/map/LocationManager.svelte'; import LocationManager from '$lib/components/map/LocationManager.svelte';
import NotificationManager from '$lib/components/notifications/NotificationManager.svelte'; import NotificationManager from '$lib/components/notifications/NotificationManager.svelte';
import { onMount } from 'svelte';
import { browser } from '$app/environment';
let { children, data } = $props(); let { children, data } = $props();
let isLoginRoute = $derived(page.url.pathname.startsWith('/login')); let isLoginRoute = $derived(page.url.pathname.startsWith('/login'));
let showHeader = $derived(!isLoginRoute && data?.user); let showHeader = $derived(!isLoginRoute && data?.user);
let isLoading = $state(false);
// Handle loading state only on client to prevent hydration mismatch
onMount(() => {
if (browser) {
isLoading = !isLoginRoute && !data?.user && data !== null;
}
});
</script> </script>
<svelte:head> <svelte:head>
@@ -51,40 +40,6 @@
{#if showHeader && data.user} {#if showHeader && data.user}
<Header user={data.user} /> <Header user={data.user} />
{:else if isLoading}
<header class="header-skeleton">
<div class="header-content">
<Skeleton class="h-8 w-32" />
<Skeleton class="h-10 w-10 rounded-full" />
</div>
</header>
{/if} {/if}
{@render children?.()} {@render children?.()}
<style>
.header-skeleton {
padding: 0 20px;
height: 64px;
display: flex;
align-items: center;
position: relative;
z-index: 100;
}
.header-content {
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 768px) {
.header-skeleton {
padding: 0 16px;
height: 56px;
}
}
</style>