From 3f103c3e15f0fe25c6767918ceb86fc98d0d5dd9 Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <mail@timmypidashev.dev>
Date: Mon, 6 Apr 2026 14:37:07 -0700
Subject: [PATCH] mobile optimizations

---
 src/components/about/intro.tsx          | 4 ++--
 src/components/about/stats-alltime.tsx  | 3 ++-
 src/components/about/stats-detailed.tsx | 3 ++-
 src/components/about/timeline.tsx       | 4 +++-
 src/components/animate-in.tsx           | 9 ++++++++-
 src/layouts/index.astro                 | 3 +--
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/about/intro.tsx b/src/components/about/intro.tsx
index 6bde038..15e8976 100644
--- a/src/components/about/intro.tsx
+++ b/src/components/about/intro.tsx
@@ -13,13 +13,13 @@ export default function Intro() {
     const inView = rect.top < window.innerHeight && rect.bottom > 0;
     const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
+    const mobile = window.innerWidth < 1024;
 
-    if (inView && (isReload || isSpaNav)) {
+    if (inView && (mobile || isReload || isSpaNav)) {
       setVisible(true);
       return;
     }
     if (inView) {
-      // Fresh navigation — animate in
       requestAnimationFrame(() => setVisible(true));
       return;
     }
diff --git a/src/components/about/stats-alltime.tsx b/src/components/about/stats-alltime.tsx
index d7cfd35..975e6d3 100644
--- a/src/components/about/stats-alltime.tsx
+++ b/src/components/about/stats-alltime.tsx
@@ -29,8 +29,9 @@ const Stats = () => {
     const inView = rect.top < window.innerHeight && rect.bottom > 0;
     const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
+    const mobile = window.innerWidth < 1024;
 
-    if (inView && (isReload || isSpaNav)) {
+    if (inView && (mobile || isReload || isSpaNav)) {
       setSkipAnim(true);
       setIsVisible(true);
       return;
diff --git a/src/components/about/stats-detailed.tsx b/src/components/about/stats-detailed.tsx
index 0cebf68..e11af72 100644
--- a/src/components/about/stats-detailed.tsx
+++ b/src/components/about/stats-detailed.tsx
@@ -36,8 +36,9 @@ const DetailedStats = () => {
     const inView = rect.top < window.innerHeight && rect.bottom > 0;
     const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
+    const mobile = window.innerWidth < 1024;
 
-    if (inView && (isReload || isSpaNav)) {
+    if (inView && (mobile || isReload || isSpaNav)) {
       setSkipAnim(true);
       setVisible(true);
       return;
diff --git a/src/components/about/timeline.tsx b/src/components/about/timeline.tsx
index 02d35b4..501f18f 100644
--- a/src/components/about/timeline.tsx
+++ b/src/components/about/timeline.tsx
@@ -53,7 +53,9 @@ function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; i
     const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
 
-    if (inView && (isReload || isSpaNav)) {
+    const mobile = window.innerWidth < 1024;
+
+    if (inView && (mobile || isReload || isSpaNav)) {
       setSkip(true);
       setVisible(true);
       return;
diff --git a/src/components/animate-in.tsx b/src/components/animate-in.tsx
index f5fb962..6daf462 100644
--- a/src/components/animate-in.tsx
+++ b/src/components/animate-in.tsx
@@ -1,6 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { prefersReducedMotion } from "@/lib/reduced-motion";
 
+function isMobile(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.innerWidth < 1024;
+}
+
 interface AnimateInProps {
   children: React.ReactNode;
   delay?: number;
@@ -27,7 +32,9 @@ export function AnimateIn({ children, delay = 0, threshold = 0.15 }: AnimateInPr
     const isReload = (performance.getEntriesByType?.("navigation")?.[0] as PerformanceNavigationTiming)?.type === "reload";
     const isSpaNav = !!(window as any).__astroNavigation;
 
-    if (inView && (isReload || isSpaNav)) {
+    // On mobile: skip animation for anything already in view (prevents flicker on navigation)
+    // On desktop: only skip on reload or SPA nav
+    if (inView && (isMobile() || isReload || isSpaNav)) {
       setSkip(true);
       setVisible(true);
       return;
diff --git a/src/layouts/index.astro b/src/layouts/index.astro
index f8926a3..4021aa7 100644
--- a/src/layouts/index.astro
+++ b/src/layouts/index.astro
@@ -74,8 +74,7 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
         });
         document.addEventListener('astro:after-swap', function() {
           var m = getMask();
-          // Wait longer for canvas + overlays to hydrate on index page
-          setTimeout(function() { m.classList.remove('active'); }, 150);
+          setTimeout(function() { m.classList.remove('active'); }, 50);
         });
         // Mark SPA navigations so AnimateIn can detect them
         document.addEventListener('astro:after-swap', function() {