skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

loading-states-and-perceived-performance

Implement spinner, skeleton, and staggered loading states with reduced-motion support.

Updated May 24, 2026
Search Tags:#frontend#ux-design#spinner#loading-states#skeleton-screen#perceived-performance
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill loading-states-and-perceived-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: loading-states-and-perceived-performance
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/loading-states-and-perceived-performance
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill loading-states-and-perceived-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Users often perceive performance based on loading cues rather than actual speed; this Skill provides patterns to set user expectations and reduce frustration by presenting appropriate loading states.

Core Features & Use Cases

  • Spinners for small, contained actions to indicate progress without changing layout.
  • Skeleton screens (glimmers/shimmers) to show layout while data loads.
  • Staggered entry and hero section animations to guide attention during app loads.
  • Optimistic UI patterns to pre-emptively reflect user actions and maintain responsiveness.
  • Brand-aligned micro-copy and progressive storytelling to add value during waits.

Quick Start

Choose the appropriate loading pattern (spinner for tiny waits, skeletons for content placeholders) and fade in the actual content once data is available.

Frequently Asked Questions about loading-states-and-perceived-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design loading states to improve perceived performance for API calls?▼

Improve perceived performance by implementing skeleton screens that show content layout while data loads, staggered entry animations for hero sections, and spinners for contained actions to manage user expectations.

What is the difference between using a spinner and a skeleton screen for UX design?▼

A spinner indicates progress for tiny, contained actions without altering layout, whereas a skeleton screen displays the anticipated layout structure with a shimmer effect to set expectations during longer data fetches.

How do I handle loading states while honoring prefers-reduced-motion settings?▼

Honor prefers-reduced-motion by replacing staggered entry animations and skeleton shimmer effects with static placeholder layouts that still set user expectations without triggering motion sensitivity during page loads.

When should I use optimistic UI patterns for frontend loading states?▼

Use optimistic UI patterns for user actions that require immediate responsiveness, pre-emptively reflecting the expected outcome to maintain perceived performance while background API calls process data.

Can I use progressive storytelling to manage wait times for data-heavy components?▼

Yes, progressive storytelling adds value during waits by using brand-aligned micro-copy and staggered entry animations to guide user attention while data-heavy components render progressively.

Related Skills

Explore More Design & Creative Skills→
huahai2022huahai2022

profile

Profile ExecuTorch model execution to collect latency and operator timing metrics.

Community
Intermediate
Maitreya04Maitreya04

high-perf-browser

Optimize browser resource fetching and rendering for Core Web Vitals.

Community
Advanced
ai-sapira-pocai-sapira-poc

clarify

Identify and rewrite unclear UX copy across frontend surfaces.

Official
Intermediate
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced