223 lines
8.8 KiB
Markdown
223 lines
8.8 KiB
Markdown
# View Switching Fixes for Member Card Issues
|
|
|
|
## Problem Description
|
|
|
|
When switching between the cluster and firmware views, member cards were experiencing:
|
|
- **Wrong UI state**: Expanded cards, active tabs, and other UI state was being lost
|
|
- **Flickering**: Visual glitches and rapid re-rendering during view switches
|
|
- **Broken functionality**: Member cards not working properly after view switches
|
|
- **Inefficient rendering**: Components were completely unmounted and remounted on every view switch
|
|
- **Incorrect state restoration**: UI state was incorrectly restored on first load (all cards expanded, wrong tabs active)
|
|
|
|
## Root Causes Identified
|
|
|
|
1. **Aggressive DOM Manipulation**: Complete component unmounting/remounting on every view switch
|
|
2. **Race Conditions**: Multiple async operations and timeouts interfering with each other
|
|
3. **State Loss**: UI state not properly preserved across view switches
|
|
4. **Rapid Navigation**: Multiple rapid clicks could cause navigation conflicts
|
|
5. **CSS Transition Conflicts**: Multiple transitions causing visual flickering
|
|
6. **No Component Caching**: Every view switch created new component instances
|
|
7. **Complex State Restoration**: Attempting to restore UI state caused incorrect behavior on first load
|
|
|
|
## Fixes Implemented
|
|
|
|
### 1. **Component Caching System** (`framework.js`)
|
|
|
|
- **Component Cache**: Components are created once and cached, never re-created
|
|
- **Pause/Resume Pattern**: Components are paused (not unmounted) when switching away
|
|
- **Pre-initialization**: Components are created during route registration for better performance
|
|
- **Simple Show/Hide**: Components are just shown/hidden without touching UI state
|
|
|
|
### 2. **Enhanced Navigation System** (`framework.js`)
|
|
|
|
- **Debounced Navigation**: Added 300ms cooldown between navigation requests
|
|
- **Navigation Queue**: Queues navigation requests when one is already in progress
|
|
- **Smooth Transitions**: Added opacity transitions to prevent abrupt view changes
|
|
- **No Component Destruction**: Components are kept alive and just paused/resumed
|
|
|
|
### 3. **Simplified State Management** (`view-models.js`)
|
|
|
|
- **No UI State Persistence**: Removed complex localStorage state restoration
|
|
- **Clean State on Load**: Components start with default state (collapsed cards, status tab)
|
|
- **No State Corruption**: Eliminates incorrect state restoration on first load
|
|
|
|
### 4. **Enhanced Component Lifecycle** (`components.js`)
|
|
|
|
- **Pause/Resume Methods**: Components can be paused and resumed without losing state
|
|
- **Default State**: Member cards always start collapsed, tabs start on 'status'
|
|
- **No State Restoration**: Components maintain their current state without external interference
|
|
- **Render Guards**: Prevents multiple simultaneous render operations
|
|
- **View Switch Detection**: Skips rendering during view transitions
|
|
- **Improved Unmounting**: Better cleanup of timeouts and event listeners
|
|
- **State Tracking**: Tracks if data has already been loaded to prevent unnecessary reloads
|
|
|
|
### 5. **CSS Improvements** (`styles.css`)
|
|
|
|
- **Smooth Transitions**: Added fade-in/fade-out animations for view switching
|
|
- **Reduced Transition Times**: Shortened member card transitions from 0.3s to 0.2s
|
|
- **Better Animations**: Improved expand/collapse animations for member cards
|
|
- **Loading States**: Added fade-in animations for loading, error, and empty states
|
|
|
|
### 6. **View Model Enhancements**
|
|
|
|
- **Smart Updates**: Only updates changed data to minimize re-renders
|
|
- **Change Detection**: Compares data before triggering updates
|
|
- **Clean Initialization**: No complex state restoration logic
|
|
|
|
## Technical Details
|
|
|
|
### Component Caching Flow
|
|
|
|
1. **Route Registration**: Components are created and cached during app initialization
|
|
2. **Navigation**: When switching views, current component is paused (not unmounted)
|
|
3. **State Preservation**: All component state, DOM, and event listeners remain intact
|
|
4. **Resume**: When returning to a view, component is resumed from paused state
|
|
5. **No Re-rendering**: Components maintain their exact state and appearance
|
|
6. **Simple Show/Hide**: No complex state restoration, just show/hide components
|
|
|
|
### Pause/Resume Pattern
|
|
|
|
```javascript
|
|
// Component is paused instead of unmounted
|
|
onPause() {
|
|
// Clear timers, pause operations
|
|
// Component state and DOM remain intact
|
|
}
|
|
|
|
onResume() {
|
|
// Restore timers, resume operations
|
|
// No re-rendering needed
|
|
}
|
|
```
|
|
|
|
### Navigation Flow
|
|
|
|
1. **Cooldown Check**: 300ms minimum between navigation requests
|
|
2. **Queue Management**: Multiple requests queued and processed sequentially
|
|
3. **Pause Current**: Current component paused (opacity: 0)
|
|
4. **Show New View**: New view becomes visible with fade-in animation
|
|
5. **Resume Component**: Cached component resumed from paused state
|
|
6. **No Unmounting**: Components are never destroyed during view switches
|
|
7. **No State Touch**: UI state is not modified during view switches
|
|
|
|
### State Management
|
|
|
|
- **Default State**: Member cards start collapsed, tabs start on 'status'
|
|
- **No Persistence**: No localStorage state restoration
|
|
- **Clean Initialization**: Components always start with predictable state
|
|
- **No State Corruption**: Eliminates incorrect state restoration issues
|
|
|
|
### Render Optimization
|
|
|
|
- **No Re-rendering**: Components maintain their exact state across view switches
|
|
- **Pause/Resume**: Components are paused instead of unmounted
|
|
- **State Persistence**: All UI state preserved in memory (not localStorage)
|
|
- **Change Detection**: Only updates changed data when resuming
|
|
- **Default Behavior**: Always starts with clean, predictable state
|
|
|
|
## Testing
|
|
|
|
Use the test page `test-view-switching.html` to verify fixes:
|
|
|
|
1. **Rapid Switching Test**: Clicks navigation tabs rapidly to test cooldown
|
|
2. **State Preservation Test**: Expands cards, switches views, verifies state restoration
|
|
3. **Component Caching Test**: Verify components are not re-created on view switches
|
|
4. **Default State Test**: Verify components start with correct default state
|
|
5. **Console Monitoring**: Check console for detailed operation logs
|
|
|
|
## Expected Results
|
|
|
|
After implementing these fixes:
|
|
|
|
- ✅ **No More Re-rendering**: Components are cached and never re-created
|
|
- ✅ **No More Flickering**: Smooth transitions between views
|
|
- ✅ **Correct Default State**: Member cards start collapsed, tabs start on 'status'
|
|
- ✅ **No State Corruption**: No incorrect state restoration on first load
|
|
- ✅ **Stable Navigation**: No more broken member cards after view switches
|
|
- ✅ **Better Performance**: No unnecessary component creation/destruction
|
|
- ✅ **Improved UX**: Smoother, more professional feel
|
|
- ✅ **Memory Efficiency**: Components reused instead of recreated
|
|
- ✅ **Predictable Behavior**: Components always start with clean state
|
|
|
|
## Configuration
|
|
|
|
### Navigation Cooldown
|
|
```javascript
|
|
this.navigationCooldown = 300; // 300ms between navigation requests
|
|
```
|
|
|
|
### Component Caching
|
|
```javascript
|
|
// Components are automatically cached during route registration
|
|
app.registerRoute('cluster', ClusterViewComponent, 'cluster-view', clusterViewModel);
|
|
```
|
|
|
|
### Transition Timing
|
|
```css
|
|
.view-content {
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
```
|
|
|
|
### Member Card Transitions
|
|
```css
|
|
.member-card {
|
|
transition: all 0.2s ease;
|
|
}
|
|
```
|
|
|
|
## Architecture Benefits
|
|
|
|
### 1. **Performance**
|
|
- No component recreation on view switches
|
|
- Faster view transitions
|
|
- Reduced memory allocation/deallocation
|
|
|
|
### 2. **State Management**
|
|
- Clean, predictable default state
|
|
- No state corruption on first load
|
|
- Consistent user experience
|
|
|
|
### 3. **Maintainability**
|
|
- Cleaner component lifecycle
|
|
- No complex state restoration logic
|
|
- Easier debugging and testing
|
|
- More predictable behavior
|
|
|
|
### 4. **User Experience**
|
|
- No flickering or visual glitches
|
|
- Instant view switching
|
|
- Maintained user context
|
|
- Predictable component behavior
|
|
|
|
## Key Changes Made
|
|
|
|
### Removed Complex State Restoration
|
|
- ❌ `preserveUIState()` method
|
|
- ❌ `restoreUIState()` method
|
|
- ❌ localStorage state persistence
|
|
- ❌ Complex tab state restoration
|
|
- ❌ Expanded card state restoration
|
|
|
|
### Simplified Component Behavior
|
|
- ✅ Components start with default state
|
|
- ✅ Member cards always start collapsed
|
|
- ✅ Tabs always start on 'status'
|
|
- ✅ No external state interference
|
|
- ✅ Clean, predictable initialization
|
|
|
|
### Maintained Performance Benefits
|
|
- ✅ Component caching still works
|
|
- ✅ No re-rendering on view switches
|
|
- ✅ Smooth transitions
|
|
- ✅ Better memory efficiency
|
|
|
|
## Future Improvements
|
|
|
|
1. **Virtual Scrolling**: For large numbers of member cards
|
|
2. **Animation Preferences**: User-configurable transition speeds
|
|
3. **State Sync**: Real-time state synchronization across multiple tabs
|
|
4. **Performance Metrics**: Track and optimize render performance
|
|
5. **Lazy Loading**: Load components only when first accessed
|
|
6. **Memory Management**: Intelligent cache cleanup for unused components
|
|
7. **User Preferences**: Allow users to set default states if desired |