feat: add progress bar

Author: Amrit Kashyap Borah

src/Shared/Components/ProgressBar/ProgressBar.component.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+import { AnimatePresence, motion, useMotionValue, useSpring, useTransform } from 'framer-motion'
+
+import { ProgressBarProps } from './types'
+
+export const ProgressBar = ({ isLoading, intervalTime = 50 }: ProgressBarProps) => {
+    const progress = useMotionValue<number>(0)
+    const smoothProgress = useSpring(progress, { stiffness: 50, damping: 20 })
+
+    const width = useTransform(smoothProgress, (v) => `${v}%`)
+
+    useEffect(() => {
+        let interval = null
+
+        if (isLoading) {
+            interval = setInterval(() => {
+                const next = progress.get() + Math.random() * 5
+                progress.set(next < 95 ? next : 95)
+            }, intervalTime)
+        }
+
+        return () => clearInterval(interval)
+    }, [isLoading])
+
+    return (
+        <AnimatePresence>
+            {isLoading && (
+                <motion.div
+                    initial={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 1, ease: 'easeOut' }}
+                    className="dc__position-abs dc__top-0 dc__left-0 dc__zi-10 h-2 w-100 bcn-2"
+                >
+                    <motion.div
+                        className="h-100 bcb-5"
+                        style={{
+                            width,
+                        }}
+                    />
+                </motion.div>
+            )}
+        </AnimatePresence>
+    )
+}

src/Shared/Components/ProgressBar/index.tsx

@@ -0,0 +1 @@
+export * from './ProgressBar.component'

src/Shared/Components/ProgressBar/types.ts

@@ -0,0 +1,9 @@
+export interface ProgressBarProps {
+    isLoading: boolean
+    /**
+     * Interval in milliseconds for the progress bar simulation.
+     *
+     * @default 50
+     */
+    intervalTime?: number
+}

src/Shared/Components/index.ts

@@ -79,6 +79,7 @@ export * from './ModalSidebarPanel'
 export * from './NumbersCount'
 export * from './PhoneInput'
 export * from './Plugin'
+export * from './ProgressBar'
 export { default as QRCode } from './QRCode'
 export * from './ReactSelect'
 export * from './RegistryIcon'