codesnips
typescript css 139 lines · 4 tabs

Frontend: skeleton loading instead of spinners

Shared by codesnips Jan 2026
4 tabs 
import { useEffect, useRef, useState } from "react";

export type AsyncState<T> =
  | { status: "loading" }
  | { status: "error"; error: Error }
  | { status: "success"; data: T };

export function useAsyncData<T>(
  fetcher: () => Promise<T>,
  deps: unknown[] = []
): { state: AsyncState<T>; reload: () => void } {
  const [state, setState] = useState<AsyncState<T>>({ status: "loading" });
  const [nonce, setNonce] = useState(0);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    setState({ status: "loading" });
    fetcher()
      .then((data) => {
        if (mounted.current) setState({ status: "success", data });
      })
      .catch((err: unknown) => {
        const error = err instanceof Error ? err : new Error(String(err));
        if (mounted.current) setState({ status: "error", error });
      });
    return () => {
      mounted.current = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [...deps, nonce]);

  return { state, reload: () => setNonce((n) => n + 1) };
}
4 files · typescript, css Explain with highlit

Skeleton loaders replace spinners with grey placeholder shapes that mimic the final content's layout. This reduces perceived latency and prevents layout shift, because the page reserves the exact space the real content will occupy. This snippet shows a small, reusable system built around three collaborating files.

In useAsyncData hook, a generic fetching hook returns a discriminated union rather than a loose { data, loading, error } bag. The state is one of loading, error, or success, which forces callers to handle every case in the type system. The hook tracks a mounted ref to avoid setting state after unmount, and re-runs whenever the deps change. Modelling status as a union is the key trade-off: it is slightly more verbose at the call site but eliminates the classic bug where data is read while loading is still true.

In Skeleton components, Skeleton renders a single shimmering block whose dimensions are passed as props, and SkeletonText composes several lines with the last line intentionally narrower to imitate a real paragraph. Keeping skeletons as dumb, presentational components means each screen can assemble a bespoke placeholder that matches its actual layout — a generic spinner cannot do that. The aria-hidden and role attributes keep the placeholders out of the accessibility tree while announcing a busy state.

In UserProfileCard, the hook and skeletons are wired together. The component switches on state.status: while loading, it renders a skeleton whose avatar circle and text lines echo the loaded card exactly, so nothing jumps when data arrives. The error branch offers a retry, and only the success branch touches state.data, which TypeScript now guarantees is present.

The main pitfall this pattern avoids is a flash of skeleton for near-instant responses; a short delay before showing the skeleton (or a minimum display time) can smooth that, though it is omitted here for clarity. Reach for skeletons on content-heavy views with predictable shapes — cards, lists, tables — and keep spinners for truly indeterminate actions like form submits.

Related snips

typescript 
export interface RetryOptions {
  retries: number;
  baseMs: number;
  maxMs: number;
  signal?: AbortSignal;
  onRetry?: (attempt: number, delay: number, err: unknown) => void;

Exponential backoff with jitter for retries

typescript reliability retry
by codesnips 2 tabs
javascript 
import { Controller } from "@hotwired/stimulus"
import Mousetrap from "mousetrap"

export default class extends Controller {
  connect() {
    // Global shortcuts

Keyboard shortcuts with Stimulus and Mousetrap

stimulus javascript ux
by Jordan Lee 2 tabs
typescript 
import axios, { AxiosError } from 'axios'
import { v4 as uuidv4 } from 'uuid'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000/api/v1',
  timeout: 15000,

Axios API client with interceptors

react axios api
by Maya Patel 1 tab
typescript 
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface FilterState {
  search: string
  category: string | null

Zustand for lightweight state management

react zustand state-management
by Maya Patel 2 tabs
html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form Validation Example</title>
  <style>

HTML forms with validation and accessibility

html forms validation
by Alex Chang 1 tab
javascript 
import { Application } from "@hotwired/stimulus"
import FormSubmitController from "./controllers/form_submit_controller"

const application = Application.start()
application.debug = false

Disable submit button while Turbo form is submitting

rails hotwire stimulus
by codesnips 3 tabs

Share this code

Here's the card — post it anywhere.

Frontend: skeleton loading instead of spinners — share card
Link copied