@kerothebosa/ui-skeleton-net

Appearance

@kerothebosa/ui-skeleton-netProduction-Grade Skeleton Loading Driven by Real Network Signals

A framework-agnostic enhancer that patches fetch/xhr, stabilizes loading UX with timing controls, and exposes typed lifecycle hooks.

Install + Quick Start
API Reference
Live Demo

Framework-agnostic by design

Use it in vanilla apps or framework stacks without rewriting your data-loading architecture.

Predictable request timing behavior

Control show delay, minimum visible time, and request timeout handling to reduce flicker.

Typed lifecycle hooks and events

Observe request start/end/error plus skeleton show/hide with payloads ready for telemetry.

Release and CI disciplined

Built output is ESM+CJS+d.ts, with lint/type/test/e2e/pack checks in pipeline.

Publish-ready outputESM, CJS, d.ts, and styles entry
CI-gated workflowLint, typecheck, tests, e2e, pack-check
Typed hooksRequest and skeleton lifecycle observability
fetch + xhr coverageNetwork interception for both major browser transports

Install In 60 Seconds ​

bash
npm install @kerothebosa/ui-skeleton-net

Quick Start In 3 Steps ​

  1. Import the package and its stylesheet.
  2. Create SkeletonEnhancer with your selector and timing config.
  3. Call start() once your app initializes.
ts
import { SkeletonEnhancer } from "@kerothebosa/ui-skeleton-net";
import "@kerothebosa/ui-skeleton-net/styles.css";

const enhancer = new SkeletonEnhancer({
  skeletonSelector: "#content",
  showDelayMs: 120,
  minVisibleMs: 180,
  requestTimeoutMs: 10_000,
  timeoutMode: "abort",
  enabledInterceptors: ["fetch", "xhr"]
});

enhancer.start();
Open Live Demo in New Tab

Configuration Highlights ​

OptionTypeWhy you might tune it
showDelayMsnumberAvoid showing skeletons for very fast responses.
minVisibleMsnumberPrevent flicker by keeping shown skeletons visible long enough.
requestTimeoutMsnumberDefine timeout threshold for request lifecycle handling.
timeoutMode"abort" | "synthetic"Choose transport abort or UI-only timeout behavior.
enabledInterceptorsArray<"fetch" | "xhr">Enable only the network transports you need.
skeletonVisualsobjectConfigure mode, animation, theme, and adaptive behavior.

Use It When ​

Best Fit

  • You want skeleton behavior tied to real request lifecycle.
  • You need consistent loading UX across pages and teams.
  • You want telemetry-ready lifecycle hooks without custom plumbing.

Not The Right Fit

  • Your app already has a complete, request-aware loading orchestration layer.
  • You cannot patch global fetch/xhr in your runtime constraints.
  • You only need static placeholder markup without lifecycle logic.

Continue With The Docs ​

Architecture

Understand core modules, data flow, and runtime boundaries.

Lifecycle & Events

See exact event timing and payload semantics.

API Reference

Review public options, types, and method contracts.

Playground Guide

Run local scenarios and compare behavior with and without the package.

Released under the MIT License.

Copyright (c) kerothebosa