@lilt-ui/charts 0.8.0 → 0.9.0

package/dist/lifecycle/skeleton-exit.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+/** How long a skeleton takes to leave once data has landed (lilt-skeleton-exit in loading.css). */
+export declare const SKELETON_EXIT_MS = 240;
+/**
+ * Where a leaving skeleton sinks to: the floor its marks grow from, the edge its bars grow from,
+ * or the middle its rings and webs grow from. The data's own entrance starts from the same place.
+ */
+export type SkeletonExitOrigin = 'bottom' | 'left' | 'center';
+/**
+ * Follows a skeleton through its exit. When loading ends it reports `leaving` for
+ * SKELETON_EXIT_MS, then lets the data in. Reduced motion skips the exit, and loading again
+ * mid-exit brings the skeleton straight back.
+ */
+export declare function useSkeletonExit(loading: boolean, reduced: boolean): boolean;
+interface SkeletonExitProps {
+    leaving: boolean;
+    origin: SkeletonExitOrigin;
+    /** What the card shows in place while loading, then its data. Its root must be a DOM element. */
+    children: ReactElement;
+}
+/**
+ * Holds a card's loading view through its exit. While leaving it keeps rendering exactly the
+ * last loading view, the very same elements, so nothing redraws from the data that has just
+ * landed; its root is marked to freeze every loop inside it on its current frame and sink toward
+ * `origin` as it fades. Once gone, the data view mounts with its own entrance.
+ */
+export declare function SkeletonExit({ leaving, origin, children }: SkeletonExitProps): ReactElement;
+export {};