saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-26 06:09:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

add back ModeType to TopControls

Browse Source
This commit is contained in:
EthanHealy01 2025-08-22 14:55:41 +01:00
parent 9f929ae335
commit 1708a9b13b
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/shared/TopControls.tsx
View File

@ -5,9 +5,10 @@ import rainbowStyles from '../../styles/rainbow.module.css';
import VisibilityIcon from "@mui/icons-material/Visibility";
import EditNoteIcon from "@mui/icons-material/EditNote";
import FolderIcon from "@mui/icons-material/Folder";
import { ModeType, isValidMode } from '../../contexts/NavigationContext';
// Create view options with icons and loading states
const createViewOptions = (switchingTo: string | null) => [
const createViewOptions = (switchingTo: ModeType | null) => [
{
label: (
<div style={{ display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: 6, whiteSpace: 'nowrap'}}>
@ -50,8 +51,8 @@ const createViewOptions = (switchingTo: string | null) => [
];
interface TopControlsProps {
currentView: string;
setCurrentView: (view: string) => void;
currentView: ModeType;
setCurrentView: (view: ModeType) => void;
selectedToolKey?: string | null;
}
@ -61,19 +62,25 @@ const TopControls = ({
selectedToolKey,
}: TopControlsProps) => {
const { isRainbowMode } = useRainbowThemeContext();
const [switchingTo, setSwitchingTo] = useState<string | null>(null);
const [switchingTo, setSwitchingTo] = useState<ModeType | null>(null);
const isToolSelected = selectedToolKey !== null;
const handleViewChange = useCallback((view: string) => {
if (!isValidMode(view)) {
// Ignore invalid values defensively
return;
}
const mode = view as ModeType;
// Show immediate feedback
setSwitchingTo(view);
setSwitchingTo(mode);
// Defer the heavy view change to next frame so spinner can render
requestAnimationFrame(() => {
// Give the spinner one more frame to show
requestAnimationFrame(() => {
setCurrentView(view);
setCurrentView(mode);
// Clear the loading state after view change completes
setTimeout(() => setSwitchingTo(null), 300);