diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx index 78baa5f..f3bf97a 100644 --- a/frontend/src/components/Skeleton.tsx +++ b/frontend/src/components/Skeleton.tsx @@ -1,3 +1,5 @@ +import { useEffect, useState } from 'react' + /** * Platzhalter, solange geladen wird. * @@ -13,6 +15,34 @@ * Zweck wäre dahin. */ +/** + * Zeigen wir den Platzhalter **wirklich** – oder ist die Liste schneller da? + * + * Ohne Frist blitzt bei jedem Ordnerwechsel und bei jedem Tab-Wechsel kurz ein + * Feld grauer Kästen auf. Sie sehen aus wie Dateien, die sofort wieder + * verschwinden; Marc nannte sie „Geister", und das trifft es: Der Platzhalter + * soll Warten überbrücken, nicht Warten erfinden. + * + * **Die Frist gilt auch beim allerersten Laden.** Das war zuerst anders – ich + * hatte gedacht, beim ersten Mal gebe es ja nichts, was stehenbleiben könnte, + * also könne er sofort kommen. Beim Wechsel zwischen den Menüpunkten entsteht + * die Seite aber jedes Mal neu, und damit war *jeder* Tab-Wechsel ein „erstes + * Laden". Genau dort blitzte es dann. 220 ms Leere ist das ruhigere Bild: Man + * kommt ohnehin von einer anderen Seite, der Wechsel liest sich als Wechsel. + * + * 220 ms ist die Grenze, ab der ein Wechsel als „hakt" empfunden wird – + * darunter merkt niemand, dass überhaupt geladen wurde. + */ +export function useSkeleton(loading: boolean, frist = 220): boolean { + const [zeigen, setZeigen] = useState(false) + useEffect(() => { + if (!loading) { setZeigen(false); return } + const t = setTimeout(() => setZeigen(true), frist) + return () => clearTimeout(t) + }, [loading, frist]) + return zeigen +} + /** Ein graues Feld, das leicht pulsiert. */ function Feld({ w, h, r = 6, mb }: { w: number | string; h: number; r?: number; mb?: number }) { return ( diff --git a/frontend/src/components/calendar/EventDialog.tsx b/frontend/src/components/calendar/EventDialog.tsx index 5e4bd82..7c734e4 100644 --- a/frontend/src/components/calendar/EventDialog.tsx +++ b/frontend/src/components/calendar/EventDialog.tsx @@ -292,7 +292,7 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId