From 4e1d905c9e7711063a68370db97d181d5d144698 Mon Sep 17 00:00:00 2001
From: Matti Nannt <mail@matthiasnannt.com>
Date: Wed, 5 Jul 2023 15:19:54 +0200
Subject: [PATCH] Fix people service loading time (#485)

* Fix people service loading time

* run pnpm format
---
 .../[environmentId]/people/loading.tsx        | 57 +++++++++----------
 .../[environmentId]/people/page.tsx           |  2 +-
 packages/lib/services/person.ts               |  5 +-
 3 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/apps/web/app/environments/[environmentId]/people/loading.tsx b/apps/web/app/environments/[environmentId]/people/loading.tsx
index f29fd54dae..e85d115325 100644
--- a/apps/web/app/environments/[environmentId]/people/loading.tsx
+++ b/apps/web/app/environments/[environmentId]/people/loading.tsx
@@ -1,34 +1,31 @@
 export default function Loading() {
-    return (
-        <div className="rounded-lg border border-slate-200">
-            <div className="grid h-12 grid-cols-7 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
-                <div className="col-span-3 pl-6">User</div>
-                <div className="col-span-2 text-center">User ID</div>
-                <div className="col-span-2 text-center">Email</div>
+  return (
+    <div className="rounded-lg border border-slate-200">
+      <div className="grid h-12 grid-cols-7 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
+        <div className="col-span-3 pl-6">User</div>
+        <div className="col-span-2 text-center">User ID</div>
+        <div className="col-span-2 text-center">Email</div>
+      </div>
+      <div className="w-full">
+        {[...Array(3)].map((_, index) => (
+          <div key={index} className="m-2 grid h-16 grid-cols-7 content-center rounded-lg hover:bg-slate-100">
+            <div className="col-span-3 flex items-center pl-6 text-sm">
+              <div className="flex items-center">
+                <div className="ph-no-capture h-10 w-10 flex-shrink-0 animate-pulse rounded-full bg-gray-200"></div>
+                <div className="ml-4">
+                  <div className="ph-no-capture h-4 w-28 animate-pulse rounded-full bg-gray-200 font-medium text-slate-900"></div>
+                </div>
+              </div>
             </div>
-            <div className="w-full">
-                {[...Array(3)].map((_, index) => (
-                    <div
-                        key={index}
-                        className="m-2 grid h-16 grid-cols-7 content-center rounded-lg hover:bg-slate-100"
-                    >
-                        <div className="col-span-3 flex items-center pl-6 text-sm">
-                            <div className="flex items-center">
-                                <div className="ph-no-capture h-10 w-10 flex-shrink-0 animate-pulse bg-gray-200 rounded-full"></div>
-                                <div className="ml-4">
-                                    <div className="ph-no-capture font-medium text-slate-900 animate-pulse bg-gray-200 rounded-full w-28 h-4"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
-                            <div className="ph-no-capture text-slate-900 animate-pulse bg-gray-200 rounded-full m-12 h-4"></div>
-                        </div>
-                        <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
-                            <div className="ph-no-capture text-slate-900 animate-pulse bg-gray-200 rounded-full m-12 h-4"></div>
-                        </div>
-                    </div>
-                ))}
+            <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
+              <div className="ph-no-capture m-12 h-4 animate-pulse rounded-full bg-gray-200 text-slate-900"></div>
             </div>
-        </div>
-    );
+            <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
+              <div className="ph-no-capture m-12 h-4 animate-pulse rounded-full bg-gray-200 text-slate-900"></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 }
diff --git a/apps/web/app/environments/[environmentId]/people/page.tsx b/apps/web/app/environments/[environmentId]/people/page.tsx
index 1d23d93cdb..b7800835d5 100644
--- a/apps/web/app/environments/[environmentId]/people/page.tsx
+++ b/apps/web/app/environments/[environmentId]/people/page.tsx
@@ -9,7 +9,7 @@ const getAttributeValue = (person: TransformPersonOutput, attributeName: string)
   person.attributes[attributeName]?.toString();
 
 export default async function PeoplePage({ params }) {
-  const people = await getPeople();
+  const people = await getPeople(params.environmentId);
 
   return (
     <>
diff --git a/packages/lib/services/person.ts b/packages/lib/services/person.ts
index 438959d0be..2f9599de71 100644
--- a/packages/lib/services/person.ts
+++ b/packages/lib/services/person.ts
@@ -70,9 +70,12 @@ export const getPerson = async (personId: string): Promise<TPerson | null> => {
   }
 };
 
-export const getPeople = cache(async (): Promise<TPerson[]> => {
+export const getPeople = cache(async (environmentId: string): Promise<TPerson[]> => {
   try {
     const personsPrisma = await prisma.person.findMany({
+      where: {
+        environmentId: environmentId,
+      },
       select: {
         id: true,
         attributes: {