small optimizations

also fix isMobile's resize event

src/lib/animation/index.ts

@@ -1,4 +1,4 @@
-import { isMobile } from "$lib/store/index.svelte";
+import { isMobile, motion } from "$lib/store/index.svelte";
 import type { AnimationConfig, FlipParams } from "svelte/animate";
 import { cubicOut } from "svelte/easing";
 import {
@@ -8,19 +8,31 @@ import {
 	type FlyParams,
 } from "svelte/transition";
 
+// Subscribe to stores
+let motionEnabled = true;
+let isMobileDevice = false;
+
+motion.subscribe(value => {
+    motionEnabled = value;
+});
+
+isMobile.subscribe(value => {
+    isMobileDevice = value;
+});
+
 export const transition =
 	"linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001)";
 
 export const duration = 500;
 
 export function fade(node: HTMLElement, options: FadeParams) {
-	if (localStorage.getItem("motion") === "false") return {};
+	if (!motionEnabled) return {};
 	const animation = svelteFade(node, options);
 	return animation;
 }
 
 export function fly(node: HTMLElement, options: FlyParams) {
-	if (localStorage.getItem("motion") === "false" || isMobile) return {};
+	if (!motionEnabled || isMobileDevice) return {};
 	const animation = svelteFly(node, options);
 	return animation;
 }

src/lib/sections/settings/Appearance.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
-	import { setMotion, setTheme } from "$lib/store/index.svelte";
+	import { motion, setMotion, setTheme } from "$lib/store/index.svelte";
 	import {
 		MoonIcon,
 		PaletteIcon,
@@ -55,7 +55,7 @@
 
 		updateTheme();
 
-		if (localStorage.getItem("motion") === "true") {
+		if ($motion) {
 			enableMotionElement.classList.add("selected");
 			disableMotionElement.classList.remove("selected");
 		} else {

src/lib/store/index.svelte.ts

@@ -183,12 +183,13 @@ export function setTheme(theme: "light" | "dark") {
 	log(["theme"], `set to ${theme}`);
 }
 
-export function setMotion(motion: boolean) {
+export function setMotion(motionEnabled: boolean) {
-	localStorage.setItem("motion", motion.toString());
+	localStorage.setItem("motion", motionEnabled.toString());
 	window.plausible("Motion set", {
-		props: { motion },
+		props: { motion: motionEnabled },
 	});
-	log(["motion"], `set to ${motion}`);
+	log(["motion"], `set to ${motionEnabled}`);
+	motion.set(motionEnabled);
 }
 
 export const files = new Files();
@@ -196,3 +197,5 @@ export const showGradient = writable(true);
 export const gradientColor = writable("");
 
 export const isMobile = writable(false);
+export const isFirefox = writable(false);
+export const motion = writable(true);

src/routes/+layout.svelte

@@ -14,6 +14,7 @@
 		files,
 		gradientColor,
 		isMobile,
+		motion,
 		showGradient,
 	} from "$lib/store/index.svelte";
 	import {
@@ -24,9 +25,9 @@
 	} from "lucide-svelte";
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
-	import { writable } from "svelte/store";
 	import "../app.scss";
-	let { children, data } = $props();
+	import { writable } from 'svelte/store';
+	let { children } = $props();
 
 	let shouldGoBack = writable(false);
 	let navbar = $state<HTMLDivElement>();
@@ -88,9 +89,11 @@
 		navbar?.addEventListener("mouseleave", mouseLeave);
 
 		isMobile.set(window.innerWidth <= 768);
-		document.addEventListener("resize", () => {
+		window.addEventListener("resize", () => {
 			isMobile.set(window.innerWidth <= 768);
 		});
+
+		motion.set(localStorage.getItem("motion") === "true");
 	});
 
 	let goingLeft = $state(false);
@@ -169,12 +172,12 @@
 					in:fade={{
 						duration,
 						easing: quintOut,
-						delay: 100,
+						delay: isMobile ? 0 : 100,
 					}}
 					out:fade={{
 						duration,
 						easing: quintOut,
-						delay: 200,
+						delay: isMobile ? 0 : 200,
 					}}
 				>
 					<div class="flex flex-col h-full pb-36 md:pb-0">