8 files changed, 43 insertions, 33 deletions
diff --git a/src/components/About.svelte b/src/components/About.svelte
index 4292b9fd..1dbd8038 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -1,5 +1,14 @@
 <script>
-	export let locations;
+  import { onMount } from "svelte";
+
+	let locations;
+  onMount(async () => {
+    try {
+      ({ locations } = await fetch("/locations").then((r) => r.json()));
+    } catch (e) {
+      console.log(e);
+    }
+  });
 
 	import { Image, Icon, LocationsMap } from '$comp';
 	import { t } from '$lib/translations';
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index d5caba0d..0068b95f 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -1,9 +1,8 @@
 <script>
 	import { tick, onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
-	import html2canvas from 'html2canvas';
 	import { Icon, Popup } from '$comp';
-    import { shuffleArray } from "$lib/utils";
+	import { shuffleArray } from '$lib/utils';
 
 	import 'maplibre-gl/dist/maplibre-gl.css';
 
@@ -127,7 +126,7 @@
 		}
 
 		inview = inview.sort((a, b) => a.tags.name.localeCompare(b.tags.name));
-      shuffleArray(inview);
+		shuffleArray(inview);
 	}
 
 	let popups = {};
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 5aa46242..c6b11639 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -90,6 +90,7 @@
 
 	onDestroy(() => {
 		if (browser) {
+      close();
 			clearTimeout(checkTimer);
 			clearTimeout(expireTimer);
 		}
@@ -117,7 +118,7 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main data-sveltekit-prefetch class="pb-20">
+<main class="pb-20">
 	<slot />
 </main>
 
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 15d286c8..2a06b31d 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -6,6 +6,7 @@
 	import { page } from '$app/stores';
 
 	export let user, rates, submit;
+
 	let { id } = user;
 
 	let selectedTheme = 1;
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index a5431d6a..9100401a 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -5,6 +5,7 @@
 	import { page } from '$app/stores';
 
 	export let user, rates, submit;
+
 	let fiats = Object.keys(rates);
 </script>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2cd0c473..32d31fa8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,11 @@
 <script>
+	import { PUBLIC_DOMAIN } from '$env/static/public';
 	import '../app.css';
 	import { loading, t } from '$lib/translations';
 
 	export let data;
-	let { host, pathname } = data;
+	let { pathname } = data;
+  let host = PUBLIC_DOMAIN.includes("localhost") ? `http://${PUBLIC_DOMAIN}` : `https://${PUBLIC_DOMAIN}`
 </script>
 
 <svelte:head>
@@ -11,7 +13,7 @@
 	<meta property="og:title" content="coinos" />
 	<meta name="twitter:title" content="coinos" />
 
-	<meta property="og:image" content={`${host}/icons/logo.svg`} />
+	<meta property="og:image" content={`${host}/images/logo.png`} />
 
 	<meta property="og:type" content="website" />
 	<meta property="og:description" content="An easy to use bitcoin web wallet" />
@@ -19,7 +21,7 @@
 
 	<meta name="keywords" content="coinos easy bitcoin web wallet" />
 
-	<meta name="twitter:image" content={`${host}/icons/logo.svg`} />
+	<meta name="twitter:image" content={`${host}/images/logo.png`} />
 	<meta name="twitter:card" content="summary_large_image" />
 
 	<meta property="og:url" content={host + pathname} />
@@ -28,7 +30,7 @@
 </svelte:head>
 
 {#if !$loading}
-<slot />
+	<slot />
 {/if}
 
 <style global>
diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
index 9e4b62e2..a32b0bfe 100644
--- a/src/routes/+page.server.js
+++ b/src/routes/+page.server.js
@@ -1,13 +1,4 @@
-import { get } from '$lib/utils';
-
-// export const prerender = true;
+export const prerender = true;
 export let load = async () => {
-	let data = { locations: [] };
-
-	try {
-		data = await get('/locations');
-	} catch (e) {}
-
-    data.faqs = ['cost', 'compatibility', 'safety', 'pos', 'bitcoin'];
-	return data;
+	return { faqs: ['cost', 'compatibility', 'safety', 'pos', 'bitcoin'] };
 };
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 />