From e97ed373396cdf41c36fafeaa351a93bea813edd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?=
 <90181748+FredLL-Avaiga@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:11:04 +0100
Subject: [PATCH] fix flickering on empty table refresh (#2277)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

resolves #2275

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
---
 .../src/components/Taipy/PaginatedTable.tsx        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx
index 6decb6115e..ed25406b68 100644
--- a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx
@@ -425,8 +425,8 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
     }, [pageSizeOptions, allowAllRows, pageSize]);
 
     const { rows, rowCount, filteredCount, compRows } = useMemo(() => {
-        const ret = { rows: [], rowCount: 0, filteredCount: 0, compRows: [] } as {
-            rows: RowType[];
+        const ret = { rows: undefined, rowCount: 0, filteredCount: 0, compRows: [] } as {
+            rows?: RowType[];
             rowCount: number;
             filteredCount: number;
             compRows: RowType[];
@@ -454,7 +454,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                 createSendActionNameAction(updateVarName, module, {
                     action: onEdit,
                     value: value,
-                    index: getRowIndex(rows[rowIndex], rowIndex, startIndex),
+                    index: rows ? getRowIndex(rows[rowIndex], rowIndex, startIndex) : startIndex,
                     col: colName,
                     user_value: userValue,
                     tz: tz,
@@ -469,7 +469,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
             dispatch(
                 createSendActionNameAction(updateVarName, module, {
                     action: onDelete,
-                    index: getRowIndex(rows[rowIndex], rowIndex, startIndex),
+                    index: rows ? getRowIndex(rows[rowIndex], rowIndex, startIndex): startIndex,
                     user_data: userData,
                 })
             ),
@@ -481,7 +481,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
             dispatch(
                 createSendActionNameAction(updateVarName, module, {
                     action: onAction,
-                    index: getRowIndex(rows[rowIndex], rowIndex, startIndex),
+                    index: rows ? getRowIndex(rows[rowIndex], rowIndex, startIndex): startIndex,
                     col: colName === undefined ? null : colName,
                     value,
                     reason: value === undefined ? "click" : "button",
@@ -614,7 +614,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                {rows.map((row, index) => {
+                                {rows?.map((row, index) => {
                                     const sel = selected.indexOf(index + startIndex);
                                     if (sel == 0) {
                                         Promise.resolve().then(
@@ -664,7 +664,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => {
                                         </TableRow>
                                     );
                                 })}
-                                {rows.length == 0 &&
+                                {!rows &&
                                     loading &&
                                     Array.from(Array(30).keys(), (v, idx) => (
                                         <TableRow hover key={"rowSkel" + idx}>