From ff5a32747005214691190077e60c7024b06c5d86 Mon Sep 17 00:00:00 2001
From: Adam Mertel <12932677+adammertel@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:17:07 +0100
Subject: [PATCH] Statement list virtualized (#2435)

* Create row is visible hook

* Integrate hook into statement list row, fix some stylings

* Refactor entity tag

* Isolate expand button on row to prevent column reload on row select

* Improve hidden table styles

* theme loader

* Fix row dragging

* shorter context menu timeout on mouse leave

---------

Co-authored-by: Petr Hanak <petr.nahak@gmail.com>
---
 packages/client/src/Theme/constants.ts        |   2 +-
 .../advanced/EntityTag/EntityTag.tsx          |  21 +-
 .../client/src/components/basic/Tag/Tag.tsx   | 249 +++++++-----------
 .../src/components/basic/Tag/useDragDrop.tsx  |  94 +++++++
 .../StatementsListBox/StatementListBox.tsx    |   4 +-
 .../StatementListContextMenu.tsx              |  11 +-
 .../StatementListTable/StatementListRow.tsx   | 106 ++++++--
 .../StatementListTable/StatementListTable.tsx | 153 +++++------
 .../StatementListTableStyles.tsx              |   8 +-
 .../StatementListTable/useRowIsVisible.tsx    |  26 ++
 .../StatementLitBoxStyles.tsx                 |   7 +-
 11 files changed, 390 insertions(+), 291 deletions(-)
 create mode 100644 packages/client/src/components/basic/Tag/useDragDrop.tsx
 create mode 100644 packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/useRowIsVisible.tsx

diff --git a/packages/client/src/Theme/constants.ts b/packages/client/src/Theme/constants.ts
index fd371a8d3..936067fb8 100644
--- a/packages/client/src/Theme/constants.ts
+++ b/packages/client/src/Theme/constants.ts
@@ -32,7 +32,7 @@ export const fourthPanelBoxesHeightThirds = {
 
 // the minimum pixels for the results section height
 export const MIN_SEARCH_RESULT_HEIGHT = 100;
-export const COLLAPSED_TABLE_WIDTH = 90;
+export const COLLAPSED_TABLE_WIDTH = 80;
 
 // LIMITS
 export const maxTabCount = 10;
diff --git a/packages/client/src/components/advanced/EntityTag/EntityTag.tsx b/packages/client/src/components/advanced/EntityTag/EntityTag.tsx
index f83f9299a..dbcc7b4ff 100644
--- a/packages/client/src/components/advanced/EntityTag/EntityTag.tsx
+++ b/packages/client/src/components/advanced/EntityTag/EntityTag.tsx
@@ -4,7 +4,7 @@ import { IEntity } from "@shared/types";
 import { ThemeColor } from "Theme/theme";
 import { Button, Tag } from "components";
 import { EntityTooltip } from "components/advanced";
-import React, { ReactNode, useCallback, useState } from "react";
+import React, { ReactNode, useCallback, useRef, useState } from "react";
 import { FaUnlink } from "react-icons/fa";
 import { useAppSelector } from "redux/hooks";
 import { DraggedEntityReduxItem, EntityDragItem } from "types";
@@ -78,21 +78,14 @@ export const EntityTag: React.FC<EntityTag> = ({
   }
 
   const classId = entity.class;
+
   const [buttonHovered, setButtonHovered] = useState(false);
   const [elvlHovered, setElvlHovered] = useState(false);
-
-  const [referenceElement, setReferenceElement] =
-    useState<HTMLDivElement | null>(null);
   const [tagHovered, setTagHovered] = useState(false);
 
-  const handleSetReferenceElement = useCallback(
-    (node: HTMLDivElement | null) => {
-      setReferenceElement(node);
-    },
-    []
-  );
+  const referenceEl = useRef<HTMLDivElement | null>(null);
 
-  const renderUnlinkButton = useCallback((unlinkButton: UnlinkButton) => {
+  const renderUnlinkButton = (unlinkButton: UnlinkButton) => {
     return (
       <Button
         key="d"
@@ -107,7 +100,7 @@ export const EntityTag: React.FC<EntityTag> = ({
         onClick={unlinkButton.onClick}
       />
     );
-  }, []);
+  };
 
   if (!isValidEntityClass(entity.class)) {
     // labels needs to have length and first label needs to be non-empty
@@ -141,7 +134,7 @@ export const EntityTag: React.FC<EntityTag> = ({
     <>
       <StyledEntityTagWrap
         $flexListMargin={flexListMargin}
-        ref={handleSetReferenceElement}
+        ref={referenceEl}
         onMouseEnter={handleTagHovered}
         onMouseLeave={handleTagUnhovered}
       >
@@ -171,7 +164,7 @@ export const EntityTag: React.FC<EntityTag> = ({
               Object.keys(draggedEntity).length !== 0
             }
             tagHovered={tagHovered}
-            referenceElement={referenceElement}
+            referenceElement={referenceEl.current}
             customTooltipAttributes={customTooltipAttributes}
           />
         )}
diff --git a/packages/client/src/components/basic/Tag/Tag.tsx b/packages/client/src/components/basic/Tag/Tag.tsx
index 7d3d20bc9..f367391aa 100644
--- a/packages/client/src/components/basic/Tag/Tag.tsx
+++ b/packages/client/src/components/basic/Tag/Tag.tsx
@@ -1,32 +1,13 @@
-import { EntityEnums, InterfaceEnums } from "@shared/enums";
+import { EntityEnums } from "@shared/enums";
 import { IEntity } from "@shared/types";
 import { useSearchParams } from "hooks";
-import React, {
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {
-  DragSourceMonitor,
-  DropTargetMonitor,
-  useDrag,
-  useDrop,
-} from "react-dnd";
+import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { FaStar } from "react-icons/fa";
 import { toast } from "react-toastify";
-import { setDraggedEntity } from "redux/features/territoryTree/draggedEntitySlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
-import { ThemeContext } from "styled-components";
-import {
-  DraggedEntityReduxItem,
-  EntityColors,
-  EntityDragItem,
-  ItemTypes,
-} from "types";
-import { dndHoverFn, getShortLabelByLetterCount } from "utils/utils";
+import theme from "Theme/theme";
+import { DraggedEntityReduxItem, EntityColors, EntityDragItem } from "types";
+import { getShortLabelByLetterCount } from "utils/utils";
 import {
   StyledButtonWrapper,
   StyledElvlWrapper,
@@ -36,6 +17,7 @@ import {
   StyledStarWrap,
   StyledTagWrapper,
 } from "./TagStyles";
+import useDragDrop from "./useDragDrop";
 
 interface TagProps {
   propId: string;
@@ -106,62 +88,26 @@ export const Tag: React.FC<TagProps> = ({
   const draggedEntity: DraggedEntityReduxItem = useAppSelector(
     (state) => state.draggedEntity
   );
-  const selectedThemeId: InterfaceEnums.Theme = useAppSelector(
-    (state) => state.theme
-  );
 
+  const [clickedOnce, setClickedOnce] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
-  const [, drop] = useDrop<EntityDragItem>({
-    accept: ItemTypes.TAG,
-    hover(item: EntityDragItem, monitor: DropTargetMonitor) {
-      // TODO: debounce?
-      if (moveFn && draggedEntity && draggedEntity.lvl === lvl) {
-        dndHoverFn(item, index, monitor, ref, moveFn);
-      }
-    },
-  });
-
-  const canDrag = useMemo(
-    () => entityClass !== EntityEnums.Extension.Empty && !disableDrag,
-    [entityClass, disableDrag]
-  );
-
-  const [{ isDragging }, drag] = useDrag<
-    EntityDragItem,
-    unknown,
-    { isDragging: boolean }
-  >({
-    type: ItemTypes.TAG,
-    item: {
-      id: propId,
-      index,
-      entityClass: entityClass as EntityEnums.Class,
-      isTemplate,
-      isDiscouraged,
-      entity: entity || false,
-    },
-    collect: (monitor: DragSourceMonitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-    end: (item: EntityDragItem | undefined, monitor: DragSourceMonitor) => {
-      if (item && item.index !== index) updateOrderFn(item);
-    },
-    canDrag: canDrag,
+  const [isDragging, canDrag, drag, drop] = useDragDrop({
+    entity,
+    isTemplate,
+    isDiscouraged,
+    propId,
+    entityClass,
+    disableDrag,
+    index,
+    lvl,
+    updateOrderFn,
+    draggedEntity,
+    dispatch,
+    moveFn,
+    ref,
   });
 
-  useEffect(() => {
-    if (isDragging) {
-      dispatch(setDraggedEntity({ id: propId, parentId, index, lvl }));
-    } else {
-      dispatch(setDraggedEntity({}));
-    }
-  }, [isDragging]);
-
-  drag(drop(ref));
-
-  const [clickedOnce, setClickedOnce] = useState(false);
-
   useEffect(() => {
     if (clickedOnce) {
       const timeout = setTimeout(() => {
@@ -174,56 +120,35 @@ export const Tag: React.FC<TagProps> = ({
         );
         setClickedOnce(false);
       }, 500);
-
       return () => clearTimeout(timeout);
     }
   }, [clickedOnce]);
 
-  const renderEntityTag = () => (
-    <StyledEntityTag
-      $color={
-        entityClass !== EntityEnums.Extension.Invalid
-          ? EntityColors[entityClass].color
-          : "white"
-      }
-      $isTemplate={isTemplate}
-      $darkTheme={selectedThemeId === InterfaceEnums.Theme.Dark}
-    >
-      {entityClass}
-    </StyledEntityTag>
-  );
-
-  const renderElvl = () => (
-    <StyledElvlWrapper>{elvlButtonGroup}</StyledElvlWrapper>
-  );
-
-  const renderButton = () => (
-    <StyledButtonWrapper
-      $status={status}
-      onMouseEnter={onButtonOver}
-      onMouseLeave={onButtonOut}
-      onClick={onBtnClick}
-    >
-      {button}
-    </StyledButtonWrapper>
-  );
-
-  const onDoubleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setClickedOnce(false);
-
-    !disableDoubleClick && appendDetailId(propId);
-  };
+  const renderTag = useMemo(() => {
+    const entityTag = (
+      <StyledEntityTag
+        $color={
+          entityClass !== EntityEnums.Extension.Invalid
+            ? EntityColors[entityClass].color
+            : "white"
+        }
+        $isTemplate={isTemplate}
+        $darkTheme={true}
+      >
+        {entityClass}
+      </StyledEntityTag>
+    );
 
-  const themeContext = useContext(ThemeContext);
+    const elvlWrapper = elvlButtonGroup && (
+      <StyledElvlWrapper>{elvlButtonGroup}</StyledElvlWrapper>
+    );
 
-  const renderLabel = (labelOnly: boolean = false) => {
-    return (
+    const labelWrap = (
       <StyledLabelWrap $invertedLabel={invertedLabel}>
         {isFavorited && (
           <StyledStarWrap>
             <FaStar
-              color={themeContext?.color.warning}
+              color={theme.color.warning}
               style={{ marginBottom: "0.1rem" }}
             />
           </StyledStarWrap>
@@ -231,61 +156,77 @@ export const Tag: React.FC<TagProps> = ({
         <StyledLabel
           $invertedLabel={invertedLabel}
           $status={status}
+          $labelOnly={showOnly === "label"}
           $borderStyle={borderStyle}
           $fullWidth={fullWidth}
           $isFavorited={isFavorited}
-          $labelOnly={labelOnly}
           $isItalic={labelItalic}
         >
           {label}
         </StyledLabel>
       </StyledLabelWrap>
     );
-  };
 
-  const renderShortTag = () => {
-    return (
-      <>
-        {showOnly === "entity" ? (
-          <>{renderEntityTag()}</>
-        ) : (
-          <>{renderLabel(true)}</>
-        )}
-        {button && renderButton()}
-      </>
+    const buttonWrap = button && (
+      <StyledButtonWrapper
+        $status={status}
+        onMouseEnter={onButtonOver}
+        onMouseLeave={onButtonOut}
+        onClick={onBtnClick}
+      >
+        {button}
+      </StyledButtonWrapper>
     );
-  };
 
-  const renderFullTag = () => {
-    return (
+    return showOnly ? (
+      <>
+        {showOnly === "entity" ? entityTag : labelWrap}
+        {buttonWrap}
+      </>
+    ) : (
       <>
-        {renderEntityTag()}
-        {renderLabel()}
-        {elvlButtonGroup && renderElvl()}
-        {button && renderButton()}
+        {entityTag}
+        {labelWrap}
+        {elvlWrapper}
+        {buttonWrap}
       </>
     );
-  };
+  }, [
+    entityClass,
+    isFavorited,
+    invertedLabel,
+    label,
+    labelItalic,
+    elvlButtonGroup,
+    borderStyle,
+    fullWidth,
+    showOnly,
+    status,
+    button,
+    isTemplate,
+    onButtonOver,
+    onButtonOut,
+    onBtnClick,
+  ]);
 
   return (
-    <>
-      <StyledTagWrapper
-        className="tag"
-        ref={ref}
-        $dragDisabled={!canDrag}
-        $status={status}
-        $ltype={ltype}
-        $borderStyle={borderStyle}
-        onClick={(e: React.MouseEvent) => {
-          e.stopPropagation();
-          if (!disableCopyLabel) {
-            setClickedOnce(true);
-          }
-        }}
-        onDoubleClick={(e: React.MouseEvent) => onDoubleClick(e)}
-      >
-        {showOnly ? <>{renderShortTag()}</> : <>{renderFullTag()}</>}
-      </StyledTagWrapper>
-    </>
+    <StyledTagWrapper
+      className="tag"
+      ref={ref}
+      $dragDisabled={!canDrag}
+      $status={status}
+      $ltype={ltype}
+      $borderStyle={borderStyle}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!disableCopyLabel) setClickedOnce(true);
+      }}
+      onDoubleClick={(e) => {
+        e.stopPropagation();
+        !disableDoubleClick && appendDetailId(propId);
+      }}
+    >
+      {renderTag}
+    </StyledTagWrapper>
   );
 };
diff --git a/packages/client/src/components/basic/Tag/useDragDrop.tsx b/packages/client/src/components/basic/Tag/useDragDrop.tsx
new file mode 100644
index 000000000..8c0e155b7
--- /dev/null
+++ b/packages/client/src/components/basic/Tag/useDragDrop.tsx
@@ -0,0 +1,94 @@
+import { EntityEnums } from "@shared/enums";
+import { IEntity } from "@shared/types";
+import React, { useEffect, useMemo } from "react";
+import {
+  DragSourceMonitor,
+  DropTargetMonitor,
+  useDrag,
+  useDrop,
+} from "react-dnd";
+import { setDraggedEntity } from "redux/features/territoryTree/draggedEntitySlice";
+import { useAppDispatch } from "redux/hooks";
+import { DraggedEntityReduxItem, EntityDragItem, ItemTypes } from "types";
+import { dndHoverFn } from "utils/utils";
+
+const useDragDrop = ({
+  entity,
+  isTemplate,
+  isDiscouraged,
+  propId,
+  entityClass,
+  disableDrag,
+  index,
+  lvl,
+  updateOrderFn,
+  draggedEntity,
+  dispatch,
+  moveFn,
+  ref,
+}: {
+  entity: IEntity | undefined;
+  isTemplate: boolean;
+  isDiscouraged: boolean;
+  propId: string;
+  entityClass: EntityEnums.ExtendedClass;
+  disableDrag: boolean;
+  index: number;
+  lvl: number | undefined;
+  updateOrderFn: (item: EntityDragItem) => void;
+  draggedEntity: DraggedEntityReduxItem;
+  dispatch: ReturnType<typeof useAppDispatch>;
+  moveFn?: (dragIndex: number, hoverIndex: number) => void;
+  ref: React.RefObject<HTMLDivElement>;
+}) => {
+  const canDrag = useMemo(
+    () => entityClass !== EntityEnums.Extension.Empty && !disableDrag,
+    [entityClass, disableDrag]
+  );
+
+  const [, drop] = useDrop<EntityDragItem>({
+    accept: ItemTypes.TAG,
+    hover(item: EntityDragItem, monitor: DropTargetMonitor) {
+      if (moveFn && draggedEntity && draggedEntity.lvl === lvl) {
+        dndHoverFn(item, index, monitor, ref, moveFn);
+      }
+    },
+  });
+
+  const [{ isDragging }, drag] = useDrag<
+    EntityDragItem,
+    unknown,
+    { isDragging: boolean }
+  >({
+    type: ItemTypes.TAG,
+    item: {
+      id: propId,
+      index,
+      entityClass: entityClass as EntityEnums.Class,
+      isTemplate,
+      isDiscouraged,
+      entity: entity || false,
+    },
+    collect: (monitor: DragSourceMonitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    canDrag,
+    end: (item, monitor) => item && item.index !== index && updateOrderFn(item),
+  });
+
+  useEffect(() => {
+    if (isDragging) {
+      if (canDrag && draggedEntity.id !== propId) {
+        dispatch(setDraggedEntity({ id: propId, index, lvl }));
+      }
+    } else if (draggedEntity.id === propId) {
+      dispatch(setDraggedEntity({}));
+    }
+  }, [isDragging]);
+
+  drag(drop(ref));
+
+  return [isDragging, canDrag, drag, drop];
+};
+
+export default useDragDrop;
diff --git a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListBox.tsx b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListBox.tsx
index d774efb32..2b7f96cde 100644
--- a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListBox.tsx
+++ b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListBox.tsx
@@ -619,7 +619,9 @@ export const StatementListBox: React.FC = () => {
               contentWidth={statements.length > 0 ? width + 10 : 0}
             >
               <StyledTableWrapper
-              // id="Statements-box-table"
+                $isListMode={displayMode === StatementListDisplayMode.LIST}
+
+                // id="Statements-box-table"
               >
                 {statements.length > 0 && (
                   <StatementListTable
diff --git a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListContextMenu/StatementListContextMenu.tsx b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListContextMenu/StatementListContextMenu.tsx
index 72c7c2185..9d7b14a35 100644
--- a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListContextMenu/StatementListContextMenu.tsx
+++ b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListContextMenu/StatementListContextMenu.tsx
@@ -1,9 +1,4 @@
-import {
-  FloatingPortal,
-  autoUpdate,
-  offset,
-  useFloating,
-} from "@floating-ui/react";
+import { FloatingPortal, autoUpdate, useFloating } from "@floating-ui/react";
 import { config, useSpring } from "@react-spring/web";
 import React, { ReactNode, useEffect, useState } from "react";
 import {
@@ -35,7 +30,7 @@ export const StatementListContextMenu: React.FC<StatementListContextMenu> = ({
   const handleMouseLeave = () => {
     const id = window.setTimeout(() => {
       setShowMenu(false);
-    }, 700);
+    }, 150);
 
     setTimeoutId(id);
   };
@@ -70,7 +65,7 @@ export const StatementListContextMenu: React.FC<StatementListContextMenu> = ({
         <StyledCgMenuBoxed
           onClick={(e: React.MouseEvent) => e.stopPropagation()}
           $inverted={inverted}
-          size={18}
+          size={22}
         />
         {portalMounted && (
           <FloatingPortal id="page">
diff --git a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListRow.tsx b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListRow.tsx
index 7b381a1a2..2ebcbfbba 100644
--- a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListRow.tsx
+++ b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListRow.tsx
@@ -1,13 +1,18 @@
 import { IEntity, IResponseStatement, IStatement } from "@shared/types";
 import { useSearchParams } from "hooks";
-import React, { useContext, useEffect, useRef } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import {
   DragSourceMonitor,
   DropTargetMonitor,
   useDrag,
   useDrop,
 } from "react-dnd";
-import { FaGripVertical } from "react-icons/fa";
+import {
+  FaChevronCircleDown,
+  FaChevronCircleUp,
+  FaGripVertical,
+} from "react-icons/fa";
+import { BeatLoader } from "react-spinners";
 import { Cell, ColumnInstance, Row } from "react-table";
 import { setDraggedRowId } from "redux/features/statementList/draggedRowIdSlice";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
@@ -16,6 +21,8 @@ import { DragItem, ItemTypes, StatementListDisplayMode } from "types";
 import { dndHoverFn } from "utils/utils";
 import { StatementListRowExpanded } from "./StatementListRowExpanded/StatementListRowExpanded";
 import { StyledTd, StyledTdMove, StyledTr } from "./StatementListTableStyles";
+import useIsRowVisible from "./useRowIsVisible";
+import { setRowsExpanded } from "redux/features/statementList/rowsExpandedSlice";
 
 interface StatementListRow {
   row: Row<IResponseStatement>;
@@ -53,6 +60,8 @@ export const StatementListRow: React.FC<StatementListRow> = ({
   const dropRef = useRef<HTMLTableRowElement>(null);
   const dragRef = useRef<HTMLTableCellElement>(null);
 
+  const isVisible = useIsRowVisible(dropRef);
+
   const [, drop] = useDrop<DragItem>({
     accept: ItemTypes.STATEMENT_ROW,
     hover(item: DragItem, monitor: DropTargetMonitor) {
@@ -80,7 +89,10 @@ export const StatementListRow: React.FC<StatementListRow> = ({
   }, [isDragging]);
 
   preview(drop(dropRef));
-  drag(dragRef);
+
+  useEffect(() => {
+    drag(dragRef);
+  }, [isVisible]);
 
   const themeContext = useContext(ThemeContext);
 
@@ -98,25 +110,79 @@ export const StatementListRow: React.FC<StatementListRow> = ({
         // for scrollTo fn
         id={`statement${row.original.id}`}
       >
-        {row.cells.map((cell: Cell<IResponseStatement>) => {
-          if (cell.column.id === "move") {
-            return (
-              <StyledTdMove
-                key="move"
-                ref={dragRef}
-                onClick={(e: React.MouseEvent) => e.stopPropagation()}
+        {isVisible ? (
+          <React.Fragment>
+            {row.cells.map((cell: Cell<IResponseStatement>) => {
+              if (cell.column.id === "move") {
+                return (
+                  <StyledTdMove
+                    key="move"
+                    ref={dragRef}
+                    onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                  >
+                    <FaGripVertical color={themeContext?.color.black} />
+                  </StyledTdMove>
+                );
+              } else {
+                return (
+                  <StyledTd {...cell.getCellProps()}>
+                    {cell.render("Cell")}
+                  </StyledTd>
+                );
+              }
+            })}
+            {displayMode !== StatementListDisplayMode.TEXT && (
+              <StyledTd
+                style={{
+                  justifyContent: "center",
+                }}
               >
-                <FaGripVertical color={themeContext?.color.black} />
-              </StyledTdMove>
-            );
-          } else {
-            return (
-              <StyledTd {...cell.getCellProps()}>
-                {cell.render("Cell")}
+                <span
+                  {...row.getToggleRowExpandedProps()}
+                  style={{
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                  onClick={(e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    const rowId = row.original.id;
+                    if (!rowsExpanded.includes(rowId)) {
+                      dispatch(setRowsExpanded(rowsExpanded.concat(rowId)));
+                    } else {
+                      dispatch(
+                        setRowsExpanded(rowsExpanded.filter((r) => r !== rowId))
+                      );
+                    }
+                  }}
+                >
+                  {rowsExpanded.includes(row.original.id) ? (
+                    <FaChevronCircleUp size={18} />
+                  ) : (
+                    <FaChevronCircleDown size={18} />
+                  )}
+                </span>
               </StyledTd>
-            );
-          }
-        })}
+            )}
+          </React.Fragment>
+        ) : (
+          <StyledTd colSpan={visibleColumns.length + 1}>
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                justifyContent: "center",
+              }}
+            >
+              <BeatLoader
+                size={7}
+                margin={4}
+                style={{ marginLeft: "0.3rem", marginTop: "0.1rem" }}
+                color={themeContext?.color["primary"]}
+              />
+            </div>
+          </StyledTd>
+        )}
       </StyledTr>
       {rowsExpanded.includes(row.original.id) &&
       !draggedRowId &&
diff --git a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListTable.tsx b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListTable.tsx
index a4820a172..be6d52710 100644
--- a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListTable.tsx
+++ b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListTable.tsx
@@ -57,7 +57,7 @@ const MINIFIED_HIDDEN_COLUMNS = [
   "text",
   "warnings",
   "lastEdit",
-  "expander",
+  "menu",
 ];
 type CellType = CellProps<IResponseStatement>;
 
@@ -165,8 +165,8 @@ export const StatementListTable: React.FC<StatementListTable> = ({
     return selectedStatements.map((statement) => statement.id);
   };
 
-  const columns = useMemo<Column<IResponseStatement>[]>(
-    () => [
+  const columns = useMemo<Column<IResponseStatement>[]>(() => {
+    return [
       {
         Header: "ID",
         accessor: "id",
@@ -362,96 +362,68 @@ export const StatementListTable: React.FC<StatementListTable> = ({
       },
       {
         Header: "",
-        id: "expander",
-        width: 300,
+        id: "menu",
+        width: 100,
         Cell: ({ row }: CellType) => {
           return (
-            <ButtonGroup>
-              {right !== UserEnums.RoleMode.Read && (
-                <StatementListContextMenu
-                  buttons={[
-                    <Button
-                      key="r"
-                      icon={<FaTrashAlt size={14} />}
-                      color="danger"
-                      tooltipLabel="delete"
-                      onClick={() => {
-                        setStatementToDelete(row.original);
-                        setShowSubmit(true);
-                      }}
-                    />,
-                    <Button
-                      key="d"
-                      icon={<FaClone size={14} />}
-                      color="warning"
-                      tooltipLabel="duplicate"
-                      onClick={() => {
-                        cloneStatementMutation.mutate(row.original.id);
-                      }}
-                    />,
-                    <Button
-                      key="add-up"
-                      icon={
-                        <>
-                          <FaPlus size={14} />
-                          <BsArrowUp size={14} />
-                        </>
-                      }
-                      tooltipLabel="add new statement before"
-                      color="info"
-                      onClick={() => {
-                        addStatementAtCertainIndex(row.index);
-                      }}
-                    />,
-                    <Button
-                      key="add-down"
-                      icon={
-                        <>
-                          <FaPlus size={14} />
-                          <BsArrowDown size={14} />
-                        </>
-                      }
-                      tooltipLabel="add new statement after"
-                      color="success"
-                      onClick={() => {
-                        addStatementAtCertainIndex(row.index + 1);
-                      }}
-                    />,
-                  ]}
-                />
-              )}
-              <span
-                {...row.getToggleRowExpandedProps()}
-                style={{
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                }}
-                onClick={(e: React.MouseEvent) => {
-                  e.stopPropagation();
-                  const rowId = row.original.id;
-                  if (!rowsExpanded.includes(rowId)) {
-                    dispatch(setRowsExpanded(rowsExpanded.concat(rowId)));
-                  } else {
-                    dispatch(
-                      setRowsExpanded(rowsExpanded.filter((r) => r !== rowId))
-                    );
-                  }
-                }}
-              >
-                {rowsExpanded.includes(row.original.id) ? (
-                  <FaChevronCircleUp />
-                ) : (
-                  <FaChevronCircleDown />
-                )}
-              </span>
-            </ButtonGroup>
+            right !== UserEnums.RoleMode.Read && (
+              <StatementListContextMenu
+                buttons={[
+                  <Button
+                    key="r"
+                    icon={<FaTrashAlt size={14} />}
+                    color="danger"
+                    tooltipLabel="delete"
+                    onClick={() => {
+                      setStatementToDelete(row.original);
+                      setShowSubmit(true);
+                    }}
+                  />,
+                  <Button
+                    key="d"
+                    icon={<FaClone size={14} />}
+                    color="warning"
+                    tooltipLabel="duplicate"
+                    onClick={() => {
+                      cloneStatementMutation.mutate(row.original.id);
+                    }}
+                  />,
+                  <Button
+                    key="add-up"
+                    icon={
+                      <>
+                        <FaPlus size={14} />
+                        <BsArrowUp size={14} />
+                      </>
+                    }
+                    tooltipLabel="add new statement before"
+                    color="info"
+                    onClick={() => {
+                      addStatementAtCertainIndex(row.index);
+                    }}
+                  />,
+                  <Button
+                    key="add-down"
+                    icon={
+                      <>
+                        <FaPlus size={14} />
+                        <BsArrowDown size={14} />
+                      </>
+                    }
+                    tooltipLabel="add new statement after"
+                    color="success"
+                    onClick={() => {
+                      addStatementAtCertainIndex(row.index + 1);
+                    }}
+                  />,
+                ]}
+              />
+            )
           );
         },
       },
-    ],
-    [statementsLocal, rowsExpanded, right, selectedRows, lastClickedIndex]
-  );
+    ];
+  }, [right, selectedRows, lastClickedIndex]);
 
   const {
     setHiddenColumns,
@@ -538,7 +510,7 @@ export const StatementListTable: React.FC<StatementListTable> = ({
     <StyledTable
       {...getTableProps()}
       $contentWidth={contentWidth - 10}
-      $isExpanded={displayMode === StatementListDisplayMode.LIST}
+      $isListMode={displayMode === StatementListDisplayMode.LIST}
     >
       <StyledTHead>
         {headerGroups.map((headerGroup, key) => (
@@ -552,6 +524,9 @@ export const StatementListTable: React.FC<StatementListTable> = ({
                 <th key={key}></th>
               )
             )}
+            {displayMode !== StatementListDisplayMode.TEXT && (
+              <StyledTh style={{ width: "50px" }} key={"expander"}></StyledTh>
+            )}
           </tr>
         ))}
       </StyledTHead>
diff --git a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListTableStyles.tsx b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListTableStyles.tsx
index 31bc9c192..58484cf49 100644
--- a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListTableStyles.tsx
+++ b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/StatementListTableStyles.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 interface StyledTable {
   $contentWidth: number;
-  $isExpanded: boolean;
+  $isListMode: boolean;
 }
 export const StyledTable = styled.table<StyledTable>`
   width: ${({ $contentWidth }) => $contentWidth};
@@ -14,7 +14,7 @@ export const StyledTable = styled.table<StyledTable>`
   border-style: solid;
   border-color: ${({ theme }) => theme.color["gray"][500]};
   box-shadow: ${({ theme }) => theme.boxShadow["subtle"]};
-
+  overflow-x: ${({ $isListMode }) => ($isListMode ? "auto" : "hidden")};
   transition: width 0.3s ease;
 `;
 export const StyledTHead = styled.thead`
@@ -38,6 +38,7 @@ interface StyledTr {
   opacity?: number;
 }
 export const StyledTr = styled.tr<StyledTr>`
+  height: ${({ theme }) => theme.space[16]};
   background-color: ${({ theme, $isOpened, $isSelected }) =>
     $isOpened
       ? theme.color["tableOpened"]
@@ -71,8 +72,9 @@ export const StyledTd = styled.td<StyledTd>`
   padding: ${({ theme }) => theme.space[2]};
   padding-left: ${({ theme }) => theme.space[4]};
   font-size: ${({ theme }) => theme.fontSize["sm"]};
-  height: 4rem;
+  height: ${({ theme }) => theme.space[16]};
 `;
+
 export const StyledTdMove = styled.td`
   cursor: move;
   width: 1%;
diff --git a/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/useRowIsVisible.tsx b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/useRowIsVisible.tsx
new file mode 100644
index 000000000..ee31f6f79
--- /dev/null
+++ b/packages/client/src/pages/Main/containers/StatementsListBox/StatementListTable/useRowIsVisible.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+function useIsRowVisible(
+  rowRef: React.RefObject<HTMLTableRowElement>,
+  options = {}
+) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!rowRef.current) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      options
+    );
+
+    observer.observe(rowRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [rowRef, options]);
+
+  return isVisible;
+}
+export default useIsRowVisible;
diff --git a/packages/client/src/pages/Main/containers/StatementsListBox/StatementLitBoxStyles.tsx b/packages/client/src/pages/Main/containers/StatementsListBox/StatementLitBoxStyles.tsx
index b613d8231..6cf77138c 100644
--- a/packages/client/src/pages/Main/containers/StatementsListBox/StatementLitBoxStyles.tsx
+++ b/packages/client/src/pages/Main/containers/StatementsListBox/StatementLitBoxStyles.tsx
@@ -27,10 +27,15 @@ export const StyledActionLabel = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-export const StyledTableWrapper = styled.div`
+
+interface StyledTableWrapper {
+  $isListMode?: boolean;
+}
+export const StyledTableWrapper = styled.div<StyledTableWrapper>`
   display: flex;
   flex-direction: column;
   overflow: auto;
+  overflow-x: ${({ $isListMode }) => ($isListMode ? "auto" : "hidden")};
   flex-shrink: 0;
   padding-right: 0.1rem;
   padding-bottom: 1rem;