fix: dnd workspace list will cause page to reload (#1848)

apps/web/src/components/pure/workspace-list-modal/index.tsx

@@ -29,6 +29,7 @@ import {
 } from './styles';
 
 interface WorkspaceModalProps {
+  disabled?: boolean;
   user: AccessTokenMessage | null;
   workspaces: AllWorkspace[];
   currentWorkspaceId: AllWorkspace['id'] | null;
@@ -43,6 +44,7 @@ interface WorkspaceModalProps {
 }
 
 export const WorkspaceListModal = ({
+  disabled,
   open,
   onClose,
   workspaces,
@@ -96,6 +98,7 @@ export const WorkspaceListModal = ({
 
         <StyledModalContent>
           <WorkspaceList
+            disabled={disabled}
             items={workspaces}
             currentWorkspaceId={currentWorkspaceId}
             onClick={onClickWorkspace}

apps/web/src/providers/ModalProvider.tsx

@@ -4,7 +4,7 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import type React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useTransition } from 'react';
 
 import {
   currentWorkspaceIdAtom,
@@ -45,10 +45,12 @@ export function Modals() {
   const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
   const [, setCurrentWorkspace] = useCurrentWorkspace();
   const { createLocalWorkspace } = useWorkspacesHelper();
+  const [transitioning, transition] = useTransition();
 
   return (
     <>
       <WorkspaceListModal
+        disabled={transitioning}
         user={user}
         workspaces={workspaces}
         currentWorkspaceId={currentWorkspaceId}
@@ -60,8 +62,10 @@ export function Modals() {
           (activeId, overId) => {
             const oldIndex = workspaces.findIndex(w => w.id === activeId);
             const newIndex = workspaces.findIndex(w => w.id === overId);
-            setWorkspaces(workspaces =>
+            transition(() =>
-              arrayMove(workspaces, oldIndex, newIndex)
+              setWorkspaces(workspaces =>
+                arrayMove(workspaces, oldIndex, newIndex)
+              )
             );
           },
           [setWorkspaces, workspaces]

packages/component/src/components/workspace-list/index.tsx

@@ -12,6 +12,7 @@ import type { FC } from 'react';
 import { WorkspaceCard } from '../workspace-card';
 
 export type WorkspaceListProps = {
+  disabled?: boolean;
   currentWorkspaceId: string | null;
   items: (AffineWorkspace | LocalWorkspace)[];
   onClick: (workspace: AffineWorkspace | LocalWorkspace) => void;
@@ -27,11 +28,13 @@ const SortableWorkspaceItem: FC<
   const { setNodeRef, attributes, listeners, transform } = useSortable({
     id: props.item.id,
   });
-  const style = transform
+  const style: React.CSSProperties = {
-    ? {
+    transform: transform
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
-      }
+      : undefined,
-    : undefined;
+    pointerEvents: props.disabled ? 'none' : undefined,
+    opacity: props.disabled ? 0.6 : undefined,
+  };
   return (
     <div
       data-testid="draggable-item"