Skill LibraryPrompt Skill1 DesignsTop Views

Loading Skeleton State Contract

Design timing decisions, state machines, accessible feedback, and frontend contracts for loading, skeleton screens, inline loading, spinners, progress bars, optimistic updates, streaming placeholders, and refresh states.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Interaction

Skill Directive

Description

TagsInteraction

Skill Prompt

- Inputs must include surface type, operation type, expected duration, whether progress is measurable, whether stale content exists, duplicate-submit risk, cancel/retry/background capability, target viewports, and frontend state source.
- Choose mode by duration and scope first: under one second usually needs no skeleton/spinner; medium full-page waits use skeletons; local save/refresh uses inline loading; upload/export/long computation uses measurable progress or stage text.
- Skeletons must mirror the final information architecture: title, regions, table rows, cards, media containers, and density; do not show only an app frame or empty background.
- When refreshing existing data, keep stale content visible with stale-refresh feedback instead of replacing the full page with a skeleton every time.
- Pending buttons must disable duplicate submission, keep width stable, and use action-specific copy such as Saving, Uploading 42%, or Refreshing invoices.
- For waits over about 10 seconds or unknown long work, do not use an endless spinner; provide stage text, reliable estimate, cancel, background notification, retry, or safe navigation.
- Frontend implementation must define `LoadMode`, `LoadStatus`, progress/stage, staleContentVisible, canCancel, canRetry, and reducedMotionFallback; empty/error/success/cancelled branches must be separate.
- Accessibility requirements: use `aria-busy` on the affected region, `aria-valuenow/min/max` plus labels for determinate progress, polite live regions for search/refresh, and hide skeleton placeholders from assistive tech.
- Motion must respect `prefers-reduced-motion`; shimmer can become static, fade, or no animation, with layout shift, mobile text overflow, and sticky chrome checked.
- Deliver mode recommendation, state model, copy/live-region text, CSS/React implementation notes, layout-stability rules, error/success/cancel handoff, and desktop/mobile QA checklist.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Loading Skeleton State Contract

More pages using Loading Skeleton State Contract