From 67cc593ea7ce26813da4156ba51222a854e9384f Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 11 Dec 2023 10:03:01 +0100
Subject: [PATCH] feat(tracker) update assist session with uxt id

---
 .../UsabilityTesting/LiveTestsModal.tsx       | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx b/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx
index 2be830c1c..6b72860e0 100644
--- a/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx
+++ b/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx
@@ -4,7 +4,7 @@ import { numberWithCommas } from 'App/utils';
 import { Input } from 'antd';
 import ReloadButton from 'Shared/ReloadButton';
 import SessionItem from 'Shared/SessionItem';
-import { Pagination } from 'UI';
+import { Loader, Pagination } from 'UI';
 import { observer } from 'mobx-react-lite';
 
 function LiveTestsModal({ testId, closeModal }: { testId: string; closeModal: () => void }) {
@@ -38,28 +38,31 @@ function LiveTestsModal({ testId, closeModal }: { testId: string; closeModal: ()
           onSearch={() => refreshData(page)}
         />
       </div>
-      {uxtestingStore.testAssistSessions.list.map((s: any) => (
-        <SessionItem onClick={closeModal} key={s.sessionId} session={s} live />
-      ))}
-      <div className={'flex items-center justify-between'}>
-        <div>
-          Showing{' '}
-          <span className="font-medium">{(uxtestingStore.testSessions.page - 1) * 10 + 1}</span> to{' '}
-          <span className="font-medium">
-            {(uxtestingStore.page - 1) * 10 + uxtestingStore.testSessions.list.length}
-          </span>{' '}
-          of{' '}
-          <span className="font-medium">{numberWithCommas(uxtestingStore.testSessions.total)}</span>{' '}
-          ongoing tests.
+      <Loader loading={isLoading}>
+        {uxtestingStore.testAssistSessions.list.map((s: any) => (
+          <SessionItem onClick={closeModal} key={s.sessionId} session={s} live />
+        ))}
+        <div className={'flex items-center justify-between'}>
+          <div>
+            Showing <span className="font-medium">{(page - 1) * 10 + 1}</span> to{' '}
+            <span className="font-medium">
+              {(page - 1) * 10 + uxtestingStore.testAssistSessions.list.length}
+            </span>{' '}
+            of{' '}
+            <span className="font-medium">
+              {numberWithCommas(uxtestingStore.testAssistSessions.total)}
+            </span>{' '}
+            ongoing tests.
+          </div>
+          <Pagination
+            page={page}
+            totalPages={Math.ceil(uxtestingStore.testAssistSessions.total / 10)}
+            onPageChange={refreshData}
+            limit={10}
+            debounceRequest={200}
+          />
         </div>
-        <Pagination
-          page={uxtestingStore.testAssistSessions.page}
-          totalPages={Math.ceil(uxtestingStore.testAssistSessions.total / 10)}
-          onPageChange={refreshData}
-          limit={10}
-          debounceRequest={200}
-        />
-      </div>
+      </Loader>
     </div>
   );
 }