Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Loading and empty states v1.0.0

Use this resource to stop users from seeing blank or frozen screens in a web interface

New

  • 420 downloads
  • 178 likes
  • 136 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install loading-empty-states

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent lists every place the interface waits or can be empty, picks the right state from the expected wait time, then implements it. It also covers the four kinds of empty states and accessibility. You get the code and an audit table.

Mostly picked by

Updated November 2, 2026

Skeleton screen of a card and an empty state with an action button.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: method, latency ladder, rules and audit format
  • references/patterns.md: code gallery for skeletons, spinners, progress bars and empty states

Good fit for

  • A page that stays blank while loading
  • Choosing between a skeleton and a spinner
  • Designing "no results" or "first use" screens

Not for

  • Actually making pages load faster
  • Designing full error-handling flows
  • An app with no front-end code to change

Tags

  • loading
  • skeleton
  • empty state
  • ux
  • accessibility

About

You say

"My shop shows an empty page while products load. Audit the screens and add the right loading states."

Skeleton screen of a card and an empty state with an action button.

Skill published by sanky369 under the MIT license.

Show more

Prerequisites

You bring
An existing web project with screens that load data

How to use it

  1. Open the web project in your agent and describe the problem
  2. The agent lists the async screens and proposes a state for each
  3. Approve the audit table, then test on a slow network

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/patterns.md5.1 KB
  • SKILL.md8.8 KB

Origin and licence

Modified by PalateKit

Author
sanky369
Source
github.com/sanky369/vibe-building-skills/tree/e9714d8decbc9a76eaab3bd85866117b8010e9bc/skills/frontend-design/loading-states
Licence
MIT

Notice

Version modifiée de « loading-states » (sanky369, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Does this skill depend on other skills?

It mentions three neighboring skills for going further (performance, errors, motion), but works on its own.

Which frameworks are covered?

The method is framework-independent; code examples are plain HTML and CSS, to adapt.