@achmadk/react-loading-overlay

react-loading-overlay-ts is a lightweight, highly customizable React component used to provide visual feedback during asynchronous operations by dimming the background and displaying a loading indicator (spinner) and optional message.

Core Purpose

It serves as a modern, TypeScript-ready replacement for the original (and now unmaintained) react-loading-overlay library. It bridges the gap for developers needing a robust UI blocker that integrates seamlessly with modern build tools and strictly typed codebases.

Key Improvements over Original

• TypeScript Support: Built natively with TypeScript, providing full type definitions for props and styles.

• ES Module Support: Compatible with modern bundlers (Webpack 5, Vite, Rollup) and ES Module (ESM) standards.

• Ref Forwarding: Supports forwardRef, allowing developers to access the underlying DOM elements directly if needed.

• Modern Styling Engine: Uses the latest version of @emotion/css for styling, offering better performance and smaller bundle sizes compared to the older Emotion versions.

Technical Highlights

• Declarative API: Control the overlay state via a simple active boolean prop.

• Customization:

  • Spinners: Use the built-in spinner or pass any custom React node (e.g., SVG, Lottie animation).

  • Styling: Offers a "styles" prop inspired by react-select, allowing developers to override specific sub-components (wrapper, overlay, content, spinner) without breaking the base layout.

• Transitions: Built-in support for fade-in/fade-out transitions with customizable speeds.

Target Audience

This library is ideal for Frontend Engineers and UI/UX Developers working on React applications that require a polished "loading" state for forms, full-page transitions, or specific dashboard widgets while maintaining strict type safety and modern dependency standards.