From f917d2171e1d35870db492f1158bb572bc7283b0 Mon Sep 17 00:00:00 2001
From: Parth Gupta <guptaparth118@gmail.com>
Date: Mon, 27 May 2024 12:57:32 +0530
Subject: [PATCH] feat: rework the loading.tsx on Actions page (#2660)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
---
 .../(people)/attributes/loading.tsx           |  2 +-
 .../(people)/segments/loading.tsx             |  2 +-
 .../[environmentId]/actions/loading.tsx       | 57 ++++++++++---------
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/(people)/attributes/loading.tsx b/apps/web/app/(app)/environments/[environmentId]/(people)/attributes/loading.tsx
index f2504f1367..073ddacb95 100644
--- a/apps/web/app/(app)/environments/[environmentId]/(people)/attributes/loading.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/(people)/attributes/loading.tsx
@@ -8,7 +8,7 @@ const Loading = () => {
   return (
     <>
       <PageContentWrapper>
-        <PageHeader pageTitle="Attributes">
+        <PageHeader pageTitle="People">
           <PeopleSecondaryNavigation activeId="attributes" loading />
         </PageHeader>
         <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
diff --git a/apps/web/app/(app)/environments/[environmentId]/(people)/segments/loading.tsx b/apps/web/app/(app)/environments/[environmentId]/(people)/segments/loading.tsx
index bae55953bd..2ed4c4ea5a 100644
--- a/apps/web/app/(app)/environments/[environmentId]/(people)/segments/loading.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/(people)/segments/loading.tsx
@@ -8,7 +8,7 @@ const Loading = () => {
   return (
     <>
       <PageContentWrapper>
-        <PageHeader pageTitle="Segments">
+        <PageHeader pageTitle="People">
           <PeopleSecondaryNavigation activeId="segments" loading />
         </PageHeader>
         <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
diff --git a/apps/web/app/(app)/environments/[environmentId]/actions/loading.tsx b/apps/web/app/(app)/environments/[environmentId]/actions/loading.tsx
index 51455df103..294d12e7d1 100644
--- a/apps/web/app/(app)/environments/[environmentId]/actions/loading.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/actions/loading.tsx
@@ -1,37 +1,42 @@
+import { PageContentWrapper } from "@formbricks/ui/PageContentWrapper";
+import { PageHeader } from "@formbricks/ui/PageHeader";
+
 const Loading = () => {
   return (
     <>
-      <div className="rounded-lg border border-slate-200">
-        <div className="grid h-12 grid-cols-6 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
-          <span className="sr-only">Edit</span>
-          <div className="col-span-4 pl-6 ">User Actions</div>
-          <div className="col-span-2 text-center">Created</div>
-        </div>
-      </div>
-
-      {[...Array(3)].map((_, index) => (
-        <div key={index} className="m-2 grid h-16  grid-cols-6 content-center rounded-lg hover:bg-slate-100">
-          <div className="col-span-4 flex items-center pl-6 text-sm">
-            <div className="flex items-center">
-              <div className="h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500"></div>
-              <div className="ml-4 text-left">
-                <div className="font-medium text-slate-900">
-                  <div className="mt-0 h-4 w-48 animate-pulse rounded-full bg-slate-200"></div>
-                </div>
-                <div className="mt-1 text-xs text-slate-400">
-                  <div className="h-2 w-24 animate-pulse rounded-full bg-slate-200"></div>
+      <PageContentWrapper>
+        <PageHeader pageTitle="Actions" />
+        <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+          <div className="grid h-12 grid-cols-6 content-center border-b border-slate-200 text-left text-sm font-semibold text-slate-900">
+            <span className="sr-only">Edit</span>
+            <div className="col-span-4 pl-6 ">User Actions</div>
+            <div className="col-span-2 text-center">Created</div>
+          </div>
+          {[...Array(3)].map((_, index) => (
+            <div
+              key={index}
+              className="m-2 grid h-16 grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
+              <div className="col-span-4 flex items-center pl-6 text-sm">
+                <div className="flex items-center">
+                  <div className="h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500" />
+                  <div className="ml-4 text-left">
+                    <div className="font-medium text-slate-900">
+                      <div className="mt-0 h-4 w-48 animate-pulse rounded-full bg-slate-200"></div>
+                    </div>
+                    <div className="mt-1 text-xs text-slate-400">
+                      <div className="h-2 w-24 animate-pulse rounded-full bg-slate-200"></div>
+                    </div>
+                  </div>
                 </div>
               </div>
+              <div className="col-span-2 my-auto flex justify-center whitespace-nowrap text-center text-sm text-slate-500">
+                <div className="h-4 w-28 animate-pulse rounded-full bg-slate-200"></div>
+              </div>
             </div>
-          </div>
-          <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
-            <div className="m-28 h-4 animate-pulse rounded-full bg-slate-200"></div>
-          </div>
-          <div className="text-center"></div>
+          ))}
         </div>
-      ))}
+      </PageContentWrapper>
     </>
   );
 };
-
 export default Loading;