From a97681edab4ffb670b4479e3a8d2d2879c75f992 Mon Sep 17 00:00:00 2001
From: Priyobroto Kar <104967639+PriyobrotoKar@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:34:50 +0530
Subject: [PATCH] feat(platform): Add loading skeleton in the secrets page
 (#423)

---
 .../(main)/project/[project]/@secret/page.tsx | 34 +++++++++++++++++++
 apps/platform/src/components/ui/skeleton.tsx  | 18 ++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 apps/platform/src/components/ui/skeleton.tsx

diff --git a/apps/platform/src/app/(main)/project/[project]/@secret/page.tsx b/apps/platform/src/app/(main)/project/[project]/@secret/page.tsx
index 8919cbf7..5061bf8e 100644
--- a/apps/platform/src/app/(main)/project/[project]/@secret/page.tsx
+++ b/apps/platform/src/app/(main)/project/[project]/@secret/page.tsx
@@ -28,14 +28,17 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip'
+import { Skeleton } from '@/components/ui/skeleton'
 
 extend(relativeTime)
 
 function SecretPage(): React.JSX.Element {
   const [allSecrets, setAllSecrets] = useState<Secret[]>()
+  const [isLoading, setIsLoading] = useState<boolean>(true)
   const pathname = usePathname()
 
   useEffect(() => {
+    setIsLoading(true)
     Secrets.getAllSecretbyProjectId(pathname.split('/')[2])
       .then((data) => {
         setAllSecrets(data)
@@ -44,8 +47,21 @@ function SecretPage(): React.JSX.Element {
         // eslint-disable-next-line no-console -- we need to log the error
         console.error(error)
       })
+      .finally(() => {
+        setIsLoading(false)
+      })
   }, [pathname])
 
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        <SerectLoader />
+        <SerectLoader />
+        <SerectLoader />
+      </div>
+    )
+  }
+
   return (
     <ScrollArea className=" mb-4 h-[50rem]">
       <Accordion
@@ -120,4 +136,22 @@ function SecretPage(): React.JSX.Element {
   )
 }
 
+function SerectLoader(): React.JSX.Element {
+  return (
+    <div className=" rounded-xl bg-white/5 p-4">
+      <div className="flex justify-between">
+        <div className="flex items-center gap-x-6">
+          <Skeleton className=" h-6 w-32 rounded" />
+          <Skeleton className=" size-6 rounded" />
+        </div>
+        <div className="flex items-center gap-x-3">
+          <Skeleton className=" h-6 w-24 rounded" />
+          <Skeleton className=" h-6 w-16 rounded" />
+          <Skeleton className=" ml-5 size-4 rounded" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default SecretPage
diff --git a/apps/platform/src/components/ui/skeleton.tsx b/apps/platform/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..e2b6f938
--- /dev/null
+++ b/apps/platform/src/components/ui/skeleton.tsx
@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        'animate-pulse rounded-md bg-white/20 dark:bg-zinc-800',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }