import { useEffect, useState } from 'react'
/**
* Platzhalter, solange geladen wird.
*
* Vorher stand dort ein Kreisel in der Mitte. Der sagt „warte", aber er sagt
* nicht, **worauf** – und wenn die Daten da sind, klappt das Layout um: Der
* Kreisel verschwindet, Kacheln erscheinen, die Seite springt. Ein Platzhalter
* in der Form des Kommenden tut beides besser. Er zeigt, was gleich da ist,
* und er hält den Platz, sodass nichts springt.
*
* **Die Maße sind abgeschrieben, nicht geschätzt** – aus FileViews.tsx: Kachel
* mit 12er Radius und 100 Pixel Deckfläche, Zeile mit 8/12er Innenabstand und
* 8er Radius. Weichen sie ab, springt es beim Wechsel wieder, und der ganze
* 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 (
)
}
/**
* Wie viele Platzhalter.
*
* Genug, um die sichtbare Fläche zu füllen, und nicht mehr: Ein Schirm voll
* grauer Kästen, der sich noch scrollen lässt, verspricht mehr Inhalt als da
* ist – und enttäuscht zweimal, wenn der Ordner am Ende drei Dateien hat.
*/
const kacheln = 8
const zeilen = 7
export function SkeletonGrid() {
return (
{Array.from({ length: kacheln }, (_, i) => (
{/* Unterschiedlich lang, sonst sieht es aus wie ein Formular und
nicht wie eine Liste von Namen. */}