FIX: Eliminate jarring loading state transition in file manager connection
Fixed the brief jarring flash between SSH connection and file list display: ## Problem During file manager connection process: 1. SSH connection completes → setIsLoading(false) 2. Brief empty/intermediate state displayed (jarring flash) 3. useEffect triggers → setIsLoading(true) again 4. Directory loads → setIsLoading(false) 5. Files finally displayed This created a jarring user experience with double loading states. ## Root Cause - initializeSSHConnection() only handled SSH connection - File directory loading was handled separately in useEffect - Gap between connection completion and directory loading caused UI flash ## Solution **Unified Connection + Directory Loading:** - Modified initializeSSHConnection() to load initial directory immediately after SSH connection - Added initialLoadDoneRef to prevent duplicate loading in useEffect - Loading state now remains true until both connection AND directory are ready **Technical Changes:** - SSH connection + initial directory load happen atomically - useEffect skips initial load, only handles path changes - No more intermediate states or double loading indicators ## Flow Now: 1. setIsLoading(true) → "Connecting..." 2. SSH connection establishes 3. Initial directory loads immediately 4. setIsLoading(false) → Files displayed seamlessly **User Experience:** ✅ Smooth single loading state until everything is ready ✅ No jarring flashes or intermediate states ✅ Immediate file display after connection ✅ Maintains proper loading states for path changes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -151,9 +151,17 @@ function FileManagerContent({ initialHost, onClose }: FileManagerModernProps) {
|
|||||||
}
|
}
|
||||||
}, [currentHost]);
|
}, [currentHost]);
|
||||||
|
|
||||||
// File list update
|
// Track if initial directory load is done to prevent duplicate loading
|
||||||
|
const initialLoadDoneRef = useRef(false);
|
||||||
|
|
||||||
|
// File list update - only reload when path changes, not on initial connection
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (sshSessionId) {
|
if (sshSessionId && currentPath) {
|
||||||
|
// Skip the first load since it's handled in initializeSSHConnection
|
||||||
|
if (!initialLoadDoneRef.current) {
|
||||||
|
initialLoadDoneRef.current = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
handleRefreshDirectory();
|
handleRefreshDirectory();
|
||||||
}
|
}
|
||||||
}, [sshSessionId, currentPath]);
|
}, [sshSessionId, currentPath]);
|
||||||
@@ -203,6 +211,8 @@ function FileManagerContent({ initialHost, onClose }: FileManagerModernProps) {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
// Reset initial load flag for new connections
|
||||||
|
initialLoadDoneRef.current = false;
|
||||||
|
|
||||||
const sessionId = currentHost.id.toString();
|
const sessionId = currentHost.id.toString();
|
||||||
|
|
||||||
@@ -220,6 +230,21 @@ function FileManagerContent({ initialHost, onClose }: FileManagerModernProps) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
setSshSessionId(sessionId);
|
setSshSessionId(sessionId);
|
||||||
|
|
||||||
|
// Load initial directory immediately after connection to prevent jarring transition
|
||||||
|
try {
|
||||||
|
console.log("Loading initial directory:", currentPath);
|
||||||
|
const response = await listSSHFiles(sessionId, currentPath);
|
||||||
|
const files = Array.isArray(response) ? response : response?.files || [];
|
||||||
|
console.log("Initial directory loaded successfully:", files.length, "items");
|
||||||
|
setFiles(files);
|
||||||
|
clearSelection();
|
||||||
|
// Mark initial load as completed
|
||||||
|
initialLoadDoneRef.current = true;
|
||||||
|
} catch (dirError: any) {
|
||||||
|
console.error("Failed to load initial directory:", dirError);
|
||||||
|
// Don't show error toast here as it will be handled by the useEffect retry
|
||||||
|
}
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.error("SSH connection failed:", error);
|
console.error("SSH connection failed:", error);
|
||||||
toast.error(
|
toast.error(
|
||||||
|
|||||||
Reference in New Issue
Block a user