diff options
| author | Adam Soltys <[email protected]> | 2023-12-01 15:17:58 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-12-01 15:17:58 -0800 |
| commit | 9a1cbd040ead975d51f23f9546ba8d8bf9034207 (patch) | |
| tree | fef443bc1f831c602b1fe4a763f993cdb293690b /src/routes/+page.svelte | |
| parent | da8cbb695c9516130ba6ed8f14b922f260d2f0c6 (diff) | |
| download | coinos-ui-9a1cbd040ead975d51f23f9546ba8d8bf9034207.tar.gz coinos-ui-9a1cbd040ead975d51f23f9546ba8d8bf9034207.zip | |
optimizing
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 32 |
1 files changed, 19 insertions, 13 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9d2ba213..59d56bf1 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -11,8 +11,7 @@ } from '$comp'; import { t } from '$lib/translations'; - import { close } from '$lib/socket'; - import { onDestroy, onMount } from 'svelte'; + import { onDestroy, onMount, tick } from 'svelte'; export let data; let { faqs, locations, user } = data; @@ -33,16 +32,17 @@ let loaded; - onMount(async () => { - close(); + let observer; + let isIntersecting = false; - try { - ({ locations } = await fetch('/locations').then((r) => r.json())); - } catch (e) { - console.log(e); - } + onMount(async () => { + observer = new IntersectionObserver((entries) => { + isIntersecting = isIntersecting || entries[0].isIntersecting; + }); loaded = true; + await tick(); + observer.observe(document.getElementById('faq')); }); onDestroy(() => (loaded = false)); @@ -56,7 +56,7 @@ <LandingHeader {howItWorks} {faq} {about} {user} /> <main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0"> - <LandingHero {user} /> + <LandingHero /> <LandingInfoCard image="lightning-qr" title={$t('landing.info1.title')} @@ -82,7 +82,9 @@ </div> <div> - <h3 class="text-5xl font-medium mb-10 text-center">{$t('howItWorks.header')}</h3> + <h3 class="text-5xl font-medium mb-10 text-center"> + {$t('howItWorks.header')} + </h3> <div class="grid lg:grid-cols-3 space-y-10 lg:space-y-0 text-center"> {#each howItWorksSteps as step} <HowItWorksCard image={step.image} stepID={step.stepID} /> @@ -93,7 +95,9 @@ <div> <div class="space-y-10"> - <h3 class="text-5xl font-medium text-center pt-40 -mt-40" id="faq">{$t('faq.header')}</h3> + <h3 class="text-5xl font-medium text-center pt-40 -mt-40" id="faq"> + {$t('faq.header')} + </h3> {#each faqs as f} <FaqCard questionID={f} /> {/each} @@ -101,7 +105,9 @@ <div bind:this={about} /> </div> - <About {locations} /> + {#if isIntersecting} + <About /> + {/if} </main> <Footer /> |