f01d545ee3
- Create ContextSwitchOverlay component with full-screen loading state - Create useContextSwitch hook exposing switchContext/isContextSwitching/activeContextId - Add ContextSlice to AppState type intersection - Compose createContextSlice into store creation
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
/**
|
|
* ContextSwitchOverlay - Full-screen loading overlay during context switches.
|
|
*
|
|
* Displayed when isContextSwitching is true, preventing stale data flash
|
|
* during workspace transitions.
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
import { useStore } from '@renderer/store';
|
|
|
|
export const ContextSwitchOverlay: React.FC = () => {
|
|
const isContextSwitching = useStore((state) => state.isContextSwitching);
|
|
const targetContextId = useStore((state) => state.targetContextId);
|
|
|
|
if (!isContextSwitching) {
|
|
return null;
|
|
}
|
|
|
|
// Format context label for display
|
|
const contextLabel =
|
|
targetContextId === 'local' ? 'Local' : (targetContextId?.replace(/^ssh-/, '') ?? 'Unknown');
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-surface">
|
|
<div className="flex flex-col items-center gap-4">
|
|
{/* Spinner */}
|
|
<div className="size-8 animate-spin rounded-full border-4 border-text border-t-transparent" />
|
|
|
|
{/* Text */}
|
|
<div className="flex flex-col items-center gap-1">
|
|
<p className="text-text">Switching to {contextLabel}...</p>
|
|
<p className="text-sm text-text-secondary">Loading workspace</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|