From 08b00627e5ea2eb974e1971c4095cc6c82e8d4e3 Mon Sep 17 00:00:00 2001 From: Davide Grilli Date: Tue, 8 Sep 2026 09:39:40 +0200 Subject: [PATCH] Riduce il lag su Android: tab memoizzate, vetro/blur/drag disattivati sui device deboli MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - squadra.tsx e classifica.tsx: il contenuto di ogni tab di BarraSottosezioni è ora memoizzato con useMemo, cosi' uno stato locale o un refetch in background non ricalcolano piu' anche le sezioni nascoste. - BottomNav, BarraSottosezioni, calendario: useMotoRidotto (RAM bassa o prefers-reduced-motion) disattiva sui device deboli la catena di filtri SVG piu' pesante di .vetro, il backdrop-blur della barra tab e il drag orizzontale; su iOS e device performanti resta tutto invariato. - styles.css: rimossa l'utility .materiale, orfana da quando BottomNav e' passata a .vetro. - ui-bits.tsx: decoding="async" su TeamLogo. - todo.md: traccia le cause individuate e lo stato di applicazione di ciascuna. Co-Authored-By: Claude Sonnet 5 --- src/components/crapp/BarraSottosezioni.tsx | 16 +- src/components/crapp/BottomNav.tsx | 16 +- src/components/crapp/ui-bits.tsx | 1 + src/routes/calendario.tsx | 9 +- src/routes/classifica.tsx | 311 ++++----- src/routes/squadra.tsx | 697 ++++++++++----------- src/styles.css | 78 +-- todo.md | 118 ++++ 8 files changed, 664 insertions(+), 582 deletions(-) create mode 100644 todo.md diff --git a/src/components/crapp/BarraSottosezioni.tsx b/src/components/crapp/BarraSottosezioni.tsx index fa2988c..a919737 100644 --- a/src/components/crapp/BarraSottosezioni.tsx +++ b/src/components/crapp/BarraSottosezioni.tsx @@ -1,7 +1,8 @@ import { useEffect, useRef, useState, type ReactNode } from "react"; -import { motion, useReducedMotion } from "motion/react"; +import { motion } from "motion/react"; import { cn } from "@/lib/utils"; import { proietta } from "@/lib/molla"; +import { useMotoRidotto } from "@/lib/motion"; export type VoceSottosezione = { id: string; @@ -38,7 +39,11 @@ export function BarraSottosezioni({ const [attiva, setAttiva] = useState(defaultId ?? voci[0]?.id ?? ""); const direzione = useRef(0); const tabRefs = useRef>({}); - const ridotto = useReducedMotion(); + // `useMotoRidotto` copre anche i device deboli (RAM bassa), non solo + // `prefers-reduced-motion`: qui disattiva sia lo swipe orizzontale sia il + // blur della barra tab, i due costi maggiori all'ingresso in una pagina con + // sottosezioni (Squadra, Campionato, Profilo). + const ridotto = useMotoRidotto(); const indice = Math.max( 0, voci.findIndex((v) => v.id === attiva), @@ -69,7 +74,8 @@ export function BarraSottosezioni({
{/* Solo la barra tab può scrollare in orizzontale: non allarga il layout pagina. */} @@ -136,7 +142,9 @@ export function BarraSottosezioni({ key={voce.id} role="tabpanel" aria-label={voce.label} - drag="x" + // Sui device deboli lo swipe orizzontale (pointer listener + hit-testing + // ad ogni frame) resta disattivato: si cambia tab solo toccando la barra. + drag={ridotto ? false : "x"} dragConstraints={{ left: 0, right: 0 }} dragElastic={0.12} dragMomentum={false} diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx index 90239fc..ea6f57f 100644 --- a/src/components/crapp/BottomNav.tsx +++ b/src/components/crapp/BottomNav.tsx @@ -1,7 +1,8 @@ import { Link } from "@tanstack/react-router"; import { CalendarDays, Home, Trophy, Users } from "lucide-react"; -import { motion, useReducedMotion } from "motion/react"; +import { motion } from "motion/react"; import { molla } from "@/lib/molla"; +import { useMotoRidotto } from "@/lib/motion"; // Quattro voci e non cinque: il profilo sta in alto a destra // nell'intestazione di ogni pagina, dove lo cerca chi arriva da iOS. @@ -13,7 +14,10 @@ const items = [ ] as const; export function BottomNav() { - const ridotto = useReducedMotion(); + // `useMotoRidotto` copre anche i device deboli (RAM bassa), non solo + // `prefers-reduced-motion`: qui disattiva sia la molla della capsula sia il + // vetro sfocato, i due costi maggiori ad ogni cambio di rotta. + const ridotto = useMotoRidotto(); return (