3dtours/KGStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show loading spinner instead of hanging in open project dialog when user click open button

Browse Source
This commit is contained in:
Xiaohan-Tian
2026-05-04 21:44:25 -07:00
parent 213a4ee552
commit 6928416f78
2 changed files with 47 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/OpenProjectModal.tsx
+28 -11
View File
@@ -7,7 +7,8 @@ import { showAlert, showConfirm, showPrompt } from '../../util/dialogUtil';
interface OpenProjectModalProps {
onClose: () => void;
onOpenProject: (projectName: string) => Promise<boolean>;
onConfirmOpenProject: (projectName: string) => Promise<boolean>;
onOpenProject: (projectName: string) => Promise<void>;
currentProjectName: string | null;
onCreateNewProject: () => void;
}
@@ -44,12 +45,19 @@ const formatDate = (timestamp: number): string => {
});
};
const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProject, currentProjectName, onCreateNewProject }) => {
const OpenProjectModal: React.FC<OpenProjectModalProps> = ({
onClose,
onConfirmOpenProject,
onOpenProject,
currentProjectName,
onCreateNewProject
}) => {
const [projects, setProjects] = useState<ProjectMeta[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [filter, setFilter] = useState('');
const [isClosing, setIsClosing] = useState(false);
const mouseDownOnOverlay = useRef(false);
const pendingOpenProjectName = useRef<string | null>(null);
const [sortField, setSortField] = useState<SortField>('updatedAt');
const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
@@ -61,9 +69,16 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
const handleAnimationEnd = useCallback((e: React.AnimationEvent) => {
if (e.target !== e.currentTarget) return;
if (!isClosing) return;
const projectNameToOpen = pendingOpenProjectName.current;
pendingOpenProjectName.current = null;
setIsClosing(false);
onClose();
}, [isClosing, onClose]);
if (projectNameToOpen) {
void onOpenProject(projectNameToOpen);
}
}, [isClosing, onClose, onOpenProject]);
const fetchProjects = useCallback(async (mode: ViewMode) => {
setIsLoading(true);
@@ -121,10 +136,11 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
}, [projects, filter, sortField, sortDirection]);
const handleOpen = async (projectName: string) => {
const opened = await onOpenProject(projectName);
if (opened) {
startClose();
}
const confirmed = await onConfirmOpenProject(projectName);
if (!confirmed) return;
pendingOpenProjectName.current = projectName;
startClose();
};
const handleDuplicate = async (e: React.MouseEvent, projectName: string) => {
@@ -141,11 +157,12 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
try {
const storage = KGProjectStorage.getInstance();
const finalName = await storage.resolveUniqueName(trimmed);
const confirmed = await onConfirmOpenProject(finalName);
if (!confirmed) return;
await storage.duplicate(projectName, finalName);
const opened = await onOpenProject(finalName);
if (opened) {
startClose();
}
pendingOpenProjectName.current = finalName;
startClose();
} catch (error) {
console.error('Error duplicating project:', error);
await showAlert(`Failed to duplicate project: ${error}`);