UNPKG

@n8d/htwoo-patterns

Version:

hTWOo Patterns to setup custom style guide

lab.n8d.studio/htwoo/

n8design/htwoo

63 lines (45 loc) • 2.36 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
--- title: Document Card Shimmer order: 13 --- # Document Card - Shimmer The Document Card Shimmer variant provides an animated loading state that maintains the visual structure of the Document Card while content loads asynchronously. It uses shimmer animations to indicate loading progress and enhance perceived performance. ## Overview This variant creates a skeleton loading state with animated shimmer effects that match the Document Card layout. It provides visual feedback to users during content loading while maintaining the expected card structure and dimensions. ## Features - **Shimmer Animation**: Subtle animated loading indicators - **Structural Consistency**: Maintains Document Card layout during loading - **Performance Enhancement**: Improves perceived loading performance - **Adaptive Layout**: Same responsive behavior as standard Document Card - **Smooth Transitions**: Seamless transition from loading to loaded state ## Usage Ideal for scenarios with: - Asynchronous content loading - Network-dependent content - Large document collections - Progressive loading patterns - Performance-sensitive interfaces ## Structure Maintains the same visual structure as Document Card with shimmer placeholders: 1. **Image Placeholder**: Shimmer animation for image loading 2. **Location Placeholder**: Animated placeholder for location text 3. **Title Placeholder**: Shimmer effect for title loading 4. **Footer Placeholder**: Animated placeholders for metadata ## Animation Behavior ### Shimmer Effect - **Gradient Animation**: Subtle animated gradient overlay - **Timing**: Smooth, continuous animation loop - **Performance**: GPU-accelerated animations for smooth performance - **Duration**: Appropriate timing for loading perception ### Transition Handling - **Fade-in**: Smooth transition from shimmer to actual content - **Layout Preservation**: Maintains card dimensions during transition - **Content Replacement**: Seamless content substitution - **State Management**: Clear loading state indicators ## Best Practices ### User Experience - **Loading Duration**: Don't show shimmer for very short loading times - **Content Priority**: Load critical content first - **Error States**: Transition to error states when loading fails - **Progressive Loading**: Load content progressively as it becomes available ## SCSS Import