fix: person loading skeleton (formbricks#3160)

Racks-Labs · Sep 19, 2024 · 0b55344 · 0b55344
1 parent 6b64367
commit 0b55344
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/.../web/app/(app)/environments/[environmentId]/(people)/people/components/PersonDataView.tsx b/.../web/app/(app)/environments/[environmentId]/(people)/people/components/PersonDataView.tsx
@@ -44,34 +44,37 @@ export const PersonDataView = ({ environment, personCount, itemsPerPage }: Perso
     };
 
     fetchData();
-  }, [pageNumber]);
+  }, [pageNumber, personCount, itemsPerPage, environment.id]);
 
   // Fetch additional person attributes and update table data
   useEffect(() => {
     const fetchAttributes = async () => {
-      const updatedPersonTableData = await Promise.all(
-        persons.map(async (person) => {
-          const attributes = await getPersonAttributesAction({
-            environmentId: environment.id,
-            personId: person.id,
-          });
-          return {
-            createdAt: person.createdAt,
-            personId: person.id,
-            userId: person.userId,
-            email: attributes?.data?.email ?? "",
-            attributes: attributes?.data ?? {},
-          };
-        })
-      );
-      setPersonTableData(updatedPersonTableData);
-      setIsDataLoaded(true);
+      try {
+        const updatedPersonTableData = await Promise.all(
+          persons.map(async (person) => {
+            const attributes = await getPersonAttributesAction({
+              environmentId: environment.id,
+              personId: person.id,
+            });
+            return {
+              createdAt: person.createdAt,
+              personId: person.id,
+              userId: person.userId,
+              email: attributes?.data?.email ?? "",
+              attributes: attributes?.data ?? {},
+            };
+          })
+        );
+        setPersonTableData(updatedPersonTableData);
+      } catch (error) {
+        console.error("Error fetching person attributes:", error);
+      } finally {
+        setIsDataLoaded(true);
+      }
     };
 
-    if (persons.length > 0) {
-      fetchAttributes();
-    }
-  }, [persons]);
+    fetchAttributes();
+  }, [persons, environment.id]);
 
   const fetchNextPage = async () => {
     if (hasMore && !loadingNextPage) {
@@ -91,7 +94,7 @@ export const PersonDataView = ({ environment, personCount, itemsPerPage }: Perso
   };
 
   const deletePersons = (personIds: string[]) => {
-    setPersons(persons.filter((p) => !personIds.includes(p.id)));
+    setPersons((prevPersons) => prevPersons.filter((p) => !personIds.includes(p.id)));
   };
 
   return (

diff --git a/apps/web/app/(app)/environments/[environmentId]/(people)/people/page.tsx b/apps/web/app/(app)/environments/[environmentId]/(people)/people/page.tsx
@@ -1,7 +1,6 @@
 import { PersonDataView } from "@/app/(app)/environments/[environmentId]/(people)/people/components/PersonDataView";
 import { PersonSecondaryNavigation } from "@/app/(app)/environments/[environmentId]/(people)/people/components/PersonSecondaryNavigation";
 import { CircleHelpIcon } from "lucide-react";
-import { ITEMS_PER_PAGE } from "@formbricks/lib/constants";
 import { getEnvironment } from "@formbricks/lib/environment/service";
 import { getPersonCount } from "@formbricks/lib/person/service";
 import { Button } from "@formbricks/ui/Button";
@@ -32,7 +31,7 @@ const Page = async ({ params }: { params: { environmentId: string } }) => {
       <PageHeader pageTitle="People" cta={HowToAddPeopleButton}>
         <PersonSecondaryNavigation activeId="people" environmentId={params.environmentId} />
       </PageHeader>
-      <PersonDataView environment={environment} personCount={personCount} itemsPerPage={ITEMS_PER_PAGE} />
+      <PersonDataView environment={environment} personCount={personCount} itemsPerPage={25} />
     </PageContentWrapper>
   );
 };