🐛(frontend) Range selection freezes when there are many items in the list by PanchoutNathan · Pull Request #662 · suitenumerique/drive

PanchoutNathan · 2026-04-13T13:08:09Z

Purpose

Temporary document describing the root cause of the range-selection lag on large folders and the rationale for moving to a useSyncExternalStore based selection store with per-id listeners. Kept as the first commit purely to help reviewers follow the diff. It will be removed from the branch before merge — it is not meant to land on main.

Introduce a lightweight external store compatible with useSyncExternalStore. It exposes: - a global subscription for consumers that need the full list or count - per-id subscriptions so a row can bail out automatically when its own isSelected boolean has not changed - setSelectedItems that diffs the previous and next id maps and notifies only the listeners whose status actually flipped No React state, no context fan-out: a marquee tick that flips N rows notifies exactly N listeners instead of invalidating the whole tree.

Drop selectedItems / selectedItemsMap from GlobalExplorerContext and move every call-site to the selection store introduced in the previous commit. Rows of the embedded explorer grid are extracted into a memoed EmbeddedExplorerGridRow that subscribes to its own id via useIsItemSelected, and the name/actions/mobile cells are memoed and read their selection status the same way. High-level consumers that only need a boolean or a count use useHasSelection / useSelectionCount so they no longer re-render on every marquee tick: - AppExplorerInner uses useHasSelection to toggle the selection bar - ExplorerDndProvider splits the count consumers into dedicated child components (drag overlay and move confirmation modal) - useTableKeyboardNavigation subscribes imperatively through selectionStore.subscribe so the focus effect runs without invalidating the host component EmbeddedExplorer creates its own local store so the move modal and the SDK picker keep their selection scoped and do not leak into the main explorer selection. Fixes #124

sonarqubecloud · 2026-04-14T07:34:26Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

NathanVss

Nice improvement 🙏

NathanVss · 2026-04-15T15:34:12Z

This doc was ultra useful for the review. So I think you should make a proper english version that resume our approach on this pattern as a doc inside an architecture folder at the root of the repo under docs/... so we could in the future tell why we implemented this approach.

NathanVss · 2026-04-15T15:34:37Z

+      if (listeners) listeners.forEach((l) => l());
+    });
+
+    this.globalListeners.forEach((l) => l());


Should'n' this call be bypassed if there are no changeIds?

NathanVss · 2026-04-15T15:37:22Z

-  openMoveModal: () => void;
-  closeMoveModal: () => void;


NathanVss · 2026-04-16T12:54:28Z

+  const applyShiftRangeSelect = useCallback(
+    (row: Row<Item>) => {
+      const rows = table.getRowModel().rows;
+      const lastSelectedIndex = rows.findIndex(
+        (r) => r.id === lastSelectedRowRef.current,
+      );
+      const currentIndex = rows.findIndex((r) => r.id === row.id);
+      if (lastSelectedIndex === -1 || currentIndex === -1) {
+        return;
+      }
+
+      const startIndex = Math.min(lastSelectedIndex, currentIndex);
+      const endIndex = Math.max(lastSelectedIndex, currentIndex);
+      const newSelection = [...selectionStore.getSelectedItems()];
+      for (let i = startIndex; i <= endIndex; i++) {
+        if (!selectionStore.isSelected(rows[i].original.id)) {
+          newSelection.push(rows[i].original);
+        }
+      }
+      selectionStore.setSelectedItems(newSelection);
+    },
+    [selectionStore, table],
+  );
+
+  const toggleRowSelection = useCallback(
+    (row: Row<Item>) => {
+      const wasSelected = selectionStore.isSelected(row.original.id);
+      selectionStore.setSelectedItems((value) => {
+        if (value.some((item) => item.id === row.original.id)) {
+          return value.filter((item) => item.id !== row.original.id);
+        }
+        return [...value, row.original];
+      });
+      if (!wasSelected) {
+        lastSelectedRowRef.current = row.id;
+      }
+    },
+    [selectionStore],
+  );
+
+  const replaceRowSelection = useCallback(
+    (row: Row<Item>) => {
+      selectionStore.setSelectedItems([row.original]);
+      lastSelectedRowRef.current = row.id;
+      props.setRightPanelForcedItem?.(undefined);
+    },
+    [selectionStore, props.setRightPanelForcedItem],
+  );
+
+  const openRow = useCallback(
+    (row: Row<Item>) => {
+      if (row.original.type === ItemType.FOLDER) {
+        props.onNavigate({
+          type: NavigationEventType.ITEM,
+          item: row.original,
+        });
+      } else {
+        props.onFileClick?.(row.original);
+      }
+    },
+    [props.onNavigate, props.onFileClick],
+  );
+
+  const handleRowClick = useCallback(
+    (e: React.MouseEvent<HTMLTableRowElement>, row: Row<Item>) => {
+      if (row.original.upload_state === ItemUploadState.DUPLICATING) {
+        return;
+      }
+
+      // Because if we use modals or other components, even with a Portal, React triggers events on the original parent.
+      // So we check that the clicked element is indeed an element of the table.
+      if (!(e.target as HTMLElement).closest("tr")) {
+        return;
+      }
+
+      // In SDK mode we want the popup to behave like desktop. For instance we want the simple click to
+      // trigger selection, not to open a file as it is the case on mobile.
+      const isMobile = isTablet() && props.displayMode !== "sdk";
+
+      if (isMobile || e.detail === 2) {
+        openRow(row);
+        return;
+      }
+
+      if (e.detail !== 1 || !canSelect(row.original)) {
+        return;
+      }
+
+      const metaActive =
+        props.enableMetaKeySelection &&
+        (e.metaKey || e.ctrlKey || props.displayMode === "sdk");
+
+      if (
+        props.enableMetaKeySelection &&
+        e.shiftKey &&
+        lastSelectedRowRef.current
+      ) {
+        applyShiftRangeSelect(row);
+      } else if (metaActive) {
+        toggleRowSelection(row);
+      } else {
+        replaceRowSelection(row);
+      }
+    },
    [
-      props,
-      selectedItemsMap,
-      moveModal.open,
-      moveModal.close,
-      isActionModalOpen,
+      props.displayMode,
+      props.enableMetaKeySelection,
+      canSelect,
+      openRow,
+      applyShiftRangeSelect,
+      toggleRowSelection,
+      replaceRowSelection,
    ],
  );

+  const handleRowContextMenu = useCallback(
+    (e: React.MouseEvent<HTMLTableRowElement>, row: Row<Item>) => {
+      if (props.displayMode === "sdk") {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (row.original.upload_state === ItemUploadState.DUPLICATING) {
+        return;
+      }
+
+      selectionStore.setSelectedItems([row.original]);
+
+      contextMenu.open({
+        position: { x: e.clientX, y: e.clientY },
+        items: getItemActionMenuItems(row.original),
+      });
+    },
+    [
+      props.displayMode,
+      selectionStore,
+      contextMenu,
+      getItemActionMenuItems,
+    ],
+  );


Would be great to put that into the row component

NathanVss · 2026-04-16T13:11:36Z

+  const localSelectedItems = useSyncExternalStore(
+    itemsExplorer.selectionStore.subscribe,
+    itemsExplorer.selectionStore.getSelectedItems,
+    itemsExplorer.selectionStore.getSelectedItems,


Is the third argument needed?

PanchoutNathan self-assigned this Apr 13, 2026

PanchoutNathan linked an issue Apr 13, 2026 that may be closed by this pull request

Range selection freezes when there are many items in the list #124

Open

PanchoutNathan force-pushed the fix/124 branch from 08c12e5 to eb38c12 Compare April 13, 2026 13:59

PanchoutNathan force-pushed the fix/124 branch from eb38c12 to 7772150 Compare April 14, 2026 07:23

PanchoutNathan added 2 commits April 14, 2026 09:32

PanchoutNathan force-pushed the fix/124 branch from 7772150 to e600b99 Compare April 14, 2026 07:33

PanchoutNathan requested a review from NathanVss April 14, 2026 08:04

NathanVss approved these changes Apr 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛(frontend) Range selection freezes when there are many items in the list#662

🐛(frontend) Range selection freezes when there are many items in the list#662
PanchoutNathan wants to merge 3 commits intomainfrom
fix/124

PanchoutNathan commented Apr 13, 2026

Uh oh!

sonarqubecloud bot commented Apr 14, 2026

Uh oh!

NathanVss left a comment

Uh oh!

NathanVss Apr 15, 2026

Uh oh!

NathanVss Apr 15, 2026

Uh oh!

NathanVss Apr 15, 2026

Uh oh!

NathanVss Apr 16, 2026

Uh oh!

NathanVss Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

PanchoutNathan commented Apr 13, 2026

Purpose

Uh oh!

sonarqubecloud bot commented Apr 14, 2026

Quality Gate passed

Uh oh!

NathanVss left a comment

Choose a reason for hiding this comment

Uh oh!

NathanVss Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

NathanVss Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

NathanVss Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

NathanVss Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

NathanVss Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants