ethanhua/Skeleton
Skeleton
Skeleton is a skeleton loading library and UI component library for mobile applications. It provides a system for rendering animated shimmer placeholders and grayed-out shapes that mimic the final layout of a page while content is loading.
The framework acts as a UI placeholder generator that automatically mirrors the dimensions and margins of actual views to create structurally accurate loading states. It implements a shimmer animation framework that applies sliding gradient overlays without requiring modifications to the original UI source code.
The library covers loading state visualization and content placeholders for lists and layouts. It uses view-hierarchy traversal and automatic overlay injection to maintain visual stability and reduce perceived wait times during data fetching.
Features
- Loading Skeletons - Renders placeholder shimmer animations over views or lists to signal that content is loading.
- Shimmer Effects - Uses a sliding gradient background to simulate loading progress through a continuous shimmer animation.
- Loading State Visualizations - Renders skeleton views in lists or layouts to maintain visual stability while fetching remote data.
- Placeholder Overlays - Implements animated grey-box overlays that mimic the geometry of underlying UI elements during loading.
- Runtime - Copies dimensions and margins from actual views to ensure placeholders perfectly align with the final content.
- Shimmer Animation Wrappers - Implements view wrappers that apply sliding gradient shimmer animations to child elements.
- Loading State Indicators - Creates placeholder shimmer effects to indicate content is loading and reduce perceived wait time.
- Skeleton Placeholders - Provides UI components that mimic the structure of content during loading states to reduce perceived wait times.
- Placeholder Generators - Automatically mirrors dimensions and margins from actual views to generate structurally accurate loading states.
- View Hierarchy Traversers - Analyzes the existing layout tree to automatically determine the size and position of placeholder elements.
- Automatic Overlay Injections - Implements a system that inserts shimmer views directly above target components without requiring changes to the original source code.
- Interactive Content Placeholders - Implements shimmer effects over existing interface elements to maintain visual stability before actual content arrives.
- Mobile UI Component Libraries - Provides a collection of reusable interface elements designed to reduce visual jumping during data fetching.
- Perceived Performance Optimizations - Improves the perceived speed of an application by showing structural grey-box overlays instead of empty screens.
- Loading Visuals - Renders temporary shimmer animations that mirror the dimensions and margins of target UI components.
