Load-It: React Loading States Library

Load-It is a lightweight and easy-to-use React library designed to handle loading states in your web applications. With Load-It, you can seamlessly manage loading animations and skeleton loaders to enhance user experience during data fetching and content loading.

Features

The Load-It library currently offers the following features:

Simple Loader: Display a straightforward loading spinner to indicate ongoing background tasks or data loading processes.

Skeleton Loader: Implement skeleton loaders to create an elegant and subtle loading effect for components and content placeholders.

Installation

To use Load-It in your React project, simply install it via npm:

npm i @ayush-2002/load-it

Simple Loader

Usage

Each Loader component provides a straightforward loading spinner that you can easily integrate into your React components. When loading is set to true, the spinner will be displayed, indicating ongoing background tasks or data loading processes.

import React, { useState, useEffect } from "react";
import { CircleInLoader } from "@ayush-2002/load-it";

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 2000); // Set the loading state to false after 2 seconds
  }, []);

  return (
    <div>
      {/* Your component content */}
      <CircleInLoader loading={isLoading} />
    </div>
  );
};

export default MyComponent;

Props for Simple Loader Components

Most loader components have default props for seamless integration. Here are the common default props shared among several loaders:

• loading (boolean, default: true): Controls the visibility of the loader.
• size (string, default: '48px'): Specifies the width and height of the loader.
• primary (string, default: '#B5B5B5'): Sets the primary color of the loader.
• secondary (string, default: '#ff3d00'): Sets the secondary color of the loader.
• speedMultiplier (number, default: 1): Adjusts the animation speed of the loader.
• cssOverride (CSSProperties object, default: {}): Provides the ability to apply custom CSS styles to the loader.

primary and secondary props

primary and secondary color props accept a string value in the formats '#xxx', '#xxxxxx', 'rgb(r, g, b)', or 'rgba(r, g, b, a)'

size Prop

It accepts a string value representing the size, which can be specified in various units such as pixels (px) or percentages (%).

Example: size="64px"

If no unit is provided with the size value, it is assumed to be in pixels by default. So, if you provide a numeric value without a unit, like size="64", it will be treated as size="64px".

speedMultiplier prop

It accepts a numeric value that serves as a multiplier for the default animation duration.

Example: If speedMultiplier={2}, the loader's animation will be twice as fast as the default speed.

cssOverride prop

The cssOverride prop allows you to customize the styles of the loader by passing a CSSProperties object. You can use this prop to override any specific styles and apply your own customizations to the loader.

const customStyles = {
  color: "blue",
  border: "2px solid red",
};

<CircleInLoader cssOverride={customStyles} />;

ProgressBarLoader Component

The ProgressBarLoader component in Load-It is designed to display a progress bar while tracking the progress of a given Promise.

| Prop | Type | Description | Default Value | | ---------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | | promise | Promise | (required) The Promise to track the progress of. The progress bar will update as the Promise progresses, and the component will show the success or error message based on the Promise result. | - | | primary | string | (optional) The color of the progress bar. Can be specified as a string in the format "#xxx", "#xxxxxx", "rgb", or "rgba". | "#B5B5B5" | | secondary | string | (optional) The color of the progress bar's background. Can be specified as a string in the format "#xxx", "#xxxxxx", "rgb", or "rgba". | "#ff3d00" | | width | string | (optional) The width of the progress bar. Can be specified as a string with or without units (e.g., "100%" or "200px"). | "100%" | | height | string | (optional) The height of the progress bar. Can be specified as a string with or without units (e.g., "25px" or "50%"). | "25px" | | percentage | boolean | (optional) A boolean flag indicating whether to show the progress percentage on the progress bar. | true | | successMessage | string | (optional) The message to display when the Promise resolves successfully. | "" | | errorMessage | string | (optional) The message to display when the Promise encounters an error. | "Error" | | messageCSS | CSSProperties | (optional) Additional CSS styles to apply to the message displayed on the progress bar. | {} | | cssOverride | CSSProperties | (optional) Additional CSS styles to override the default styles of the progress bar. | {} |

Usage

import React from "react";
import { ProgressBarLoader } from "@ayush-2002/load-it";

const MyComponent = () => {
  const [loading, setLoading] = React.useState(true);
  const [data, setData] = React.useState(null);

  const fetchData = async () => {
    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts/1"
      );
      const data = await response.json();
      setData(data);
      setLoading(false);
    } catch (error) {
      console.error("Error fetching data:", error);
      setLoading(false);
    }
  };

  React.useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <ProgressBarLoader
          promise={fetchData()}
          width="80%"
          height="20px"
          percentage={true}
          successMessage="Data loaded successfully!"
          errorMessage="Failed to fetch data."
          messageCSS={{ fontSize: "12px", color: "green" }}
          cssOverride={{ borderRadius: "8px" }}
        />
      ) : data ? (
        <div>{data.title}</div>
      ) : null}
    </div>
  );
};

export default MyComponent;

List of all the Loaders:

| Loader | Requires Secondary Prop? | | --------------------- | ------------------------ | | BarLoader | Yes | | BufferingLoader | No | | CircleInLoader | Yes | | CircleLoader | Yes | | CirclePulseLoader | No | | DoubleDotLoader | Yes | | DualBoxCrossLoader | Yes | | DualBoxRotationLoader | Yes | | DualRingLoader | Yes | | ElectronLoader | Yes | | FillBoxLoader | No | | FlipLoader | No | | FlippingDiamondLoader | No | | GridLoader | No | | LinearQueueLoader | No | | LocationLoader | No | | MergeSplitLoader | Yes | | MultiCircleLoader | Yes | | RingLoader | No | | ScaleLoader | No | | SearchLoader | No | | SpinBoxLoader | No | | TimerLoader | Yes | | TriDotCircleLoader | Yes | | TripleBoxLoader | Yes | | TriPulseLoader | Yes | | TwoDotsCircleLoader | Yes | | UmbrellaLoader | Yes | | UmbrellaPulseLoader | No |

Some loaders use a single primary color for their animations.

Skeleton Loader

Basic Usage

To use the Skeleton Loader, wrap your components or content that require loading with the Skeleton component.

import React, { useState } from "react";
import { Skeleton } from "@ayush-2002/load-it";

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);

  const toggleLoading = () => {
    setIsLoading((prevIsLoading) => !prevIsLoading);
  };
  return (
    <div>
      <p>this will always visible</p>
      <Skeleton loading={isLoading}>
        <p>When isLoading is false, this will be visible</p>
      </Skeleton>
      <button onClick={toggleLoading}>Toggle Loading</button>
    </div>
  );
};

Skeleton Component Props

| Prop | Type | Description | Default Value | | ----------------- | ----------------------------- | ------------------------------------------------------------------------------- | ------------- | | loading | boolean (required) | Set to true to show the skeleton loader. | true | | circle | boolean (optional) | Set to true for a circular skeleton loader. | false | | inline | boolean (optional) | Set to true for inline rendering of the skeleton loader. | false | | className | string (optional) | Custom CSS class name to be applied to the Skeleton component. | | | children | ReactNode (required) | Content to display when loading is false. | | | cssOverride | CSSProperties (optional) | CSS properties to override default styles of the skeleton loader. | {} | | width | string (optional) | Width of the skeleton loader. | 100% | | height | string (optional) | Height of the skeleton loader. | 100% | | primary | string (optional) | Primary color of the skeleton loader (e.g., #xxxxxx, #xxx, rgb(), or rgba()). | #2c2b2b | | secondary | string (optional) | Secondary color of the skeleton loader (e.g., #xxxxxx, #xxx, rgb(), or rgba()). | #575757 | | borderRadius | string/number (optional) | Border radius of the skeleton loader. | 4px | | duration | number (optional) | Duration of the animation for the skeleton loader, in seconds. | 2 | | direction | "ltr" or "rtl" (optional) | Animation direction for the skeleton loader. | "ltr" | | enableAnimation | boolean (optional) | Set to false to disable animation for the skeleton loader. | true |

SkeletonTheme Component Prop

SkeletonTheme is a context provider component used in conjunction with the Skeleton Loader. It allows you to set default styles and configurations for all Skeleton components within its scope. By wrapping your components with SkeletonTheme, you can ensure consistent loading styles and properties across your application.

SkeletonTheme Usage

import React from "react";
import { Skeleton, SkeletonTheme } from "@ayush-2002/load-it";

const MyComponent = () => {
  return (
    <SkeletonTheme
      primary="#FF5733"
      borderRadius="8px"
      duration={1.5}
      direction="rtl"
    >
      <p>This content will always be visible</p>
      <Skeleton loading={true}>
        {" "}
        // This will use the default styles provided by SkeletonTheme
        <p>Your content </p>
      </Skeleton>
    </SkeletonTheme>
  );
};

SkeletonTheme Props

| Prop | Type | Description | Default Value | | ----------------- | ----------------------------- | ------------------------------------------------------------------------------- | ------------- | | loading | boolean (required) | Set to true to show the skeleton loader. | true | | className | string (optional) | Custom CSS class name to be applied to the Skeleton component. | | | children | ReactNode (required) | Content to display when loading is false. | | | width | string (optional) | Width of the skeleton loader. | 100% | | height | string (optional) | Height of the skeleton loader. | 100% | | primary | string (optional) | Primary color of the skeleton loader (e.g., #xxxxxx, #xxx, rgb(), or rgba()). | #2c2b2b | | secondary | string (optional) | Secondary color of the skeleton loader (e.g., #xxxxxx, #xxx, rgb(), or rgba()). | #575757 | | borderRadius | string/number (optional) | Border radius of the skeleton loader. | 4px | | duration | number (optional) | Duration of the animation for the skeleton loader, in seconds. | 2 | | direction | "ltr" or "rtl" (optional) | Animation direction for the skeleton loader. | "ltr" | | enableAnimation | boolean (optional) | Set to false to disable animation for the skeleton loader. | true |

Examples

Circular Skeleton

import React, { useState } from "react";
import { Skeleton } from "@ayush-2002/load-it";

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);

  const toggleLoading = () => {
    setIsLoading((prevIsLoading) => !prevIsLoading);
  };

  return (
    <div>
      <p>this will always visible</p>
      <Skeleton loading={isLoading} circle>
        {/* Circular skeleton loader will be displayed when loading is true */}
        <p>When isLoading is false, this will be visible</p>
      </Skeleton>
      <button onClick={toggleLoading}>Toggle Loading</button>
    </div>
  );
};

Inline Skeleton

import React, { useState } from "react";
import { Skeleton } from "@ayush-2002/load-it";

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);

  const toggleLoading = () => {
    setIsLoading((prevIsLoading) => !prevIsLoading);
  };

  return (
    <div>
      <p>This is some text in your component.</p>
      <Skeleton loading={isLoading} inline>
        <p>This content will be displayed when loading is false.</p>
      </Skeleton>
      <p>More text in your component.</p>
      <button onClick={toggleLoading}>Toggle Loading</button>
    </div>
  );
};

Acknowledgment

The styles for the Simple Loaders used in this library are inspired by the amazing work of Vineeth TRV on CodePen.

License

This project is licensed under the MIT License - see the LICENSE file for details.