mobile optimizations

This commit is contained in:
2026-04-06 14:42:08 -07:00
parent 997106eb92
commit 5ac736cad4
5 changed files with 5 additions and 20 deletions

View File

@@ -13,9 +13,7 @@ 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 && (mobile || isReload || isSpaNav)) {
if (inView && (isReload || isSpaNav)) {
setVisible(true);
return;
}

View File

@@ -29,9 +29,7 @@ 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 && (mobile || isReload || isSpaNav)) {
if (inView && (isReload || isSpaNav)) {
setSkipAnim(true);
setIsVisible(true);
return;

View File

@@ -36,9 +36,7 @@ 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 && (mobile || isReload || isSpaNav)) {
if (inView && (isReload || isSpaNav)) {
setSkipAnim(true);
setVisible(true);
return;

View File

@@ -53,9 +53,7 @@ function TimelineCard({ item, index }: { item: (typeof timelineItems)[number]; i
const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
const isSpaNav = !!(window as any).__astroNavigation;
const mobile = window.innerWidth < 1024;
if (inView && (mobile || isReload || isSpaNav)) {
if (inView && (isReload || isSpaNav)) {
setSkip(true);
setVisible(true);
return;

View File

@@ -1,11 +1,6 @@
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;
@@ -32,9 +27,7 @@ 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;
// 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)) {
if (inView && (isReload || isSpaNav)) {
setSkip(true);
setVisible(true);
return;