react-dynamic-loader-states

Dynamic loader-state management for React applications.

It provides:

• Page-level loaders
• Key-level loaders (example: submit button loader)
• Promise wrappers for axios, fetch, or any async Promise

Why this package

This package helps centralize loading states so you do not need multiple ad-hoc useState flags across components.

Installation

npm install react-dynamic-loader-states

Quick Start

import React from "react";
import axios from "axios";
import { LoaderProvider, useLoaderStates } from "react-dynamic-loader-states";

function Page() {
  const {
    isAnyPageLoading,
    isPageLoading,
    withPageLoader,
    isKeyLoading,
    withKeyLoader
  } = useLoaderStates();

  const loadDashboard = async () => {
    await withPageLoader(() => axios.get("/api/dashboard"), "dashboard");
  };

  const onSubmit = async () => {
    await withKeyLoader("submit-button", () => axios.post("/api/save", { ok: true }));
  };

  return (
    <div>
      {isAnyPageLoading && <div>Loading page...</div>}
      {isPageLoading("dashboard") && <div>Dashboard loading...</div>}

      <button onClick={loadDashboard}>Load Dashboard</button>

      <button onClick={onSubmit} disabled={isKeyLoading("submit-button")}>
        {isKeyLoading("submit-button") ? "Submitting..." : "Submit"}
      </button>
    </div>
  );
}

export default function App() {
  return (
    <LoaderProvider>
      <Page />
    </LoaderProvider>
  );
}

Core Concepts

• Page loader: a loader tied to full page or page-section operations via a page key.
• Key loader: a loader tied to a specific UI element key, like submit-button.
• Promise wrapper: automatically starts/stops loaders around async operations.

API at a Glance

• LoaderProvider
• useLoaderStates
• isAnyPageLoading
• isPageLoading(pageKey?)
• startPageLoader(pageKey?)
• stopPageLoader(pageKey?)
• withPageLoader(promiseOrFactory, pageKey?)
• isKeyLoading(key)
• registerLoader(key)
• removeLoader(key)
• withKeyLoader(key, promiseOrFactory)
• withLoader({ onStart, onFinally }, promiseOrFactory)

Documentation

• Full usage guide: USAGE.md
• API reference: API.md
• Recipes and patterns: RECIPES.md
• Troubleshooting: TROUBLESHOOTING.md

Build

npm run build

License

ISC