ff2bf474ee
Fixed race conditions and loading problems when users click folders
or navigation buttons too quickly.
## Problems Identified:
### 1. Race Conditions in Path Changes
**Issue**: Fast clicking folders/back button caused multiple simultaneous requests
- useEffect triggered on every currentPath change
- No debouncing for path changes (only for manual refresh)
- Multiple loadDirectory() calls executed concurrently
- Later responses could overwrite earlier ones
### 2. Concurrent Request Conflicts
**Issue**: loadDirectory() had basic isLoading check but insufficient protection
- Multiple requests could run if timing was right
- No tracking of which request was current
- Stale responses could update UI incorrectly
### 3. Missing Request Cancellation
**Issue**: No way to cancel outdated requests when user navigates rapidly
- Old requests would complete and show wrong directory
- Confusing UI state when mixed responses arrived
## Technical Solution:
### **Path Change Debouncing**
```typescript
// Added 150ms debounce specifically for path changes
const debouncedLoadDirectory = useCallback((path: string) => {
if (pathChangeTimerRef.current) {
clearTimeout(pathChangeTimerRef.current);
}
pathChangeTimerRef.current = setTimeout(() => {
if (path !== lastPathChangeRef.current && sshSessionId) {
loadDirectory(path);
}
}, 150);
}, [sshSessionId, loadDirectory]);
```
### **Request Race Condition Protection**
```typescript
// Track current loading path for proper cancellation
const currentLoadingPathRef = useRef<string>("");
// Enhanced concurrent request prevention
if (isLoading && currentLoadingPathRef.current !== path) {
console.log("Directory loading already in progress, skipping:", path);
return;
}
```
### **Stale Response Handling**
```typescript
// Check if response is still relevant before updating UI
if (currentLoadingPathRef.current !== path) {
console.log("Directory load canceled, newer request in progress:", path);
return; // Discard stale response
}
```
## Flow Improvements:
**Before (Problematic):**
1. User clicks folder A → currentPath changes → useEffect → loadDirectory(A)
2. User quickly clicks folder B → currentPath changes → useEffect → loadDirectory(B)
3. Both requests run concurrently
4. Response A or B arrives randomly, wrong folder might show
**After (Fixed):**
1. User clicks folder A → currentPath changes → debouncedLoadDirectory(A)
2. User quickly clicks folder B → currentPath changes → cancels A timer → debouncedLoadDirectory(B)
3. Only request B executes after 150ms
4. If A somehow runs, its response is discarded as stale
## User Experience:
✅ Rapid folder navigation works smoothly
✅ Back button rapid clicking handled properly
✅ No more loading wrong directories
✅ Proper loading states maintained
✅ No duplicate API requests
✅ Responsive feel with 150ms debounce (fast enough to feel instant)
The file manager now handles rapid user interactions gracefully without
race conditions or loading the wrong directory content.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Repo Stats
English |
中文
Achieved on September 1st, 2025
Top Technologies
If you would like, you can support the project here!
Overview
Termix is an open-source, forever-free, self-hosted all-in-one server management platform. It provides a web-based solution for managing your servers and infrastructure through a single, intuitive interface. Termix offers SSH terminal access, SSH tunneling capabilities, and remote file editing, with many more tools to come.
Features
- SSH Terminal Access - Full-featured terminal with split-screen support (up to 4 panels) and tab system
- SSH Tunnel Management - Create and manage SSH tunnels with automatic reconnection and health monitoring
- Remote File Editor - Edit files directly on remote servers with syntax highlighting, file management features ( uploading, removing, renaming, deleting files)
- SSH Host Manager - Save, organize, and manage your SSH connections with tags and folders
- Server Stats - View CPU, memory, and HDD usage on any SSH server
- User Authentication - Secure user management with admin controls and OIDC and 2FA (TOTP) support
- Modern UI - Clean desktop/mobile friendly (in progress) interface built with React, Tailwind CSS, and Shadcn
- Languages - Built-in support for English and Chinese
- Improved Platform Support - Now includes an installable Electron app (in progress) for desktop, with a dedicated mobile app also planned.
Planned Features
See Projects. If you are looking to contribute, see Contributing,
Installation
Visit the Termix Docs for more information on how to install Termix. Otherwise, view a sample docker-compose file here:
services:
termix:
image: ghcr.io/lukegus/termix:latest
container_name: termix
restart: unless-stopped
ports:
- "8080:8080"
volumes:
- termix-data:/app/data
environment:
PORT: "8080"
volumes:
termix-data:
driver: local
Pre-built binaries are now available for download, including a Windows installer/portable app and a Linux portable app ( built with Electron). See Docs for details. A native iOS/Android app is planned.
Support
If you need help with Termix, you can join the Discord server and visit the support channel. You can also open an issue or open a pull request on the GitHub repo.
Show-off
License
Distributed under the Apache License Version 2.0. See LICENSE for more information.