Preloader

We've implemented various pre-loaders as fallbacks in the project to enhance user experience. These pre-loaders provide immediate feedback, ensure smooth transitions during loading, and maintain consistency across devices and networks.

Usage

The default value of preloader in the app.config.js is set to disabled. We've created a changePreloaderaction in src/store/preloaderSlice, allowing you to change the value dynamically.

Here's the list of available pre-loaders:

• beat
• bounce
• clip
• moon

// Redux Imports
import {useDispatch, useSelector} from "react-redux"

// Actions
import {Preloader, changePreloader} from "@/store/preloaderSlice.js";

// Custom Components Imports
import EBtn from "@components/Elements/EBtn"

export const PreloaderToggler = () => {
    // Hooks
    const dispatch = useDispatch()

    // This is how you get the preloader value 
    const preloader = useSelector((Preloader));

    const TogglePreloader = () => {
        // @possible-values: beat, bounce, clip, moon 
        dispatch(changePreloader('beat'))
    }

    return (
        <EBtn onClick={TogglePreloader}>
            Beat
        </EBtn>
    )
}