feat: add indicator

Author: duongdev

.env.development

@@ -1 +1,2 @@
 NEXT_PUBLIC_APP_URL=http://localhost:3000
+NEXT_PUBLIC_REFRESH_INTERVAL=10000

.env.production

@@ -1 +1,2 @@
-NEXT_PUBLIC_APP_URL=${VERCEL_URL}
+NEXT_PUBLIC_APP_URL=https://${VERCEL_URL}
+NEXT_PUBLIC_REFRESH_INTERVAL=60000

package-lock.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-table": "^8.13.2",
     "class-variance-authority": "^0.7.0",

package.json

@@ -7,6 +7,7 @@ import { FC, useEffect, useState } from 'react'
 import { CryptoBubbles } from './crypto-bubbles'
 import { CryptoDataTable } from './crypto-table/crypto-table'
 import { columns } from './crypto-table/columns'
+import { Progress } from '@/components/ui/progress'
 
 export type RealtimeCryptoWrapperProps = {
   initialCryptos: CryptoData[]
@@ -18,9 +19,11 @@ export const RealtimeCryptoWrapper: FC<RealtimeCryptoWrapperProps> = ({
   top,
 }) => {
   const [cryptos, setCryptos] = useState<CryptoData[]>(initialCryptos)
+  const [lastUpdatedAt, setLastUpdatedAt] = useState(Date.now())
 
   useEffect(() => {
     const interval = setInterval(async () => {
+      setLastUpdatedAt(Date.now())
       getCryptoData(top).then(setCryptos)
     }, REFRESH_INTERVAL)
 
@@ -29,6 +32,10 @@ export const RealtimeCryptoWrapper: FC<RealtimeCryptoWrapperProps> = ({
 
   return (
     <>
+      <UpdateProgress
+        lastUpdatedAt={lastUpdatedAt}
+        updateInterval={REFRESH_INTERVAL}
+      />
       <CryptoBubbles
         cryptos={cryptos}
         className="h-[calc(100dvh-56px)] bg-slate-900"
@@ -39,3 +46,26 @@ export const RealtimeCryptoWrapper: FC<RealtimeCryptoWrapperProps> = ({
     </>
   )
 }
+
+const UpdateProgress: FC<{ lastUpdatedAt: number; updateInterval: number }> = ({
+  lastUpdatedAt,
+  updateInterval,
+}) => {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const elapsed = Date.now() - lastUpdatedAt
+      setProgress((elapsed / updateInterval) * 100)
+    }, 200)
+
+    return () => clearInterval(interval)
+  }, [lastUpdatedAt, updateInterval])
+
+  return (
+    <Progress
+      value={progress}
+      className="h-1 rounded-none [&>.indicator]:duration-200"
+    />
+  )
+}

src/app/_components/realtime-crypto-wrapper.tsx

@@ -1,76 +1,76 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
- 
-    --primary: 0 0% 9%;
+
+    --primary: 259 90% 45%;
     --primary-foreground: 0 0% 98%;
- 
+
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
- 
+
     --muted: 0 0% 96.1%;
     --muted-foreground: 0 0% 45.1%;
- 
+
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
- 
+
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
- 
+
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
- 
+
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
- 
+
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
- 
+
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
- 
+
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
     --ring: 0 0% 83.1%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/app/globals.css

@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="indicator h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

src/components/ui/progress.tsx

@@ -1,2 +1,4 @@
-export const REFRESH_INTERVAL = 10000
+export const REFRESH_INTERVAL = +(
+  process.env.NEXT_PUBLIC_REFRESH_INTERVAL || 10000
+)
 export const CRYPTO_DATA_URL = 'https://d2vk6ctfmdeng6.cloudfront.net/1.json'