Stirling 2.0 (#3928)

# Description of Changes

<!--

File context for managing files between tools and views
Optimisation for large files
Updated Split to work with new file system and match Matts stepped
design closer

-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Anthony Stirling <[email protected]>

frontend/src/components/shared/TopControls.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Button, SegmentedControl } from "@mantine/core";
+import React, { useState, useCallback } from "react";
+import { Button, SegmentedControl, Loader } from "@mantine/core";
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import LanguageSelector from "./LanguageSelector";
 import rainbowStyles from '../../styles/rainbow.module.css';
@@ -8,15 +8,19 @@ import LightModeIcon from '@mui/icons-material/LightMode';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
-import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import FolderIcon from "@mui/icons-material/Folder";
 import { Group } from "@mantine/core";
 
-const VIEW_OPTIONS = [
+// This will be created inside the component to access switchingTo
+const createViewOptions = (switchingTo: string | null) => [
   {
     label: (
       <Group gap={5}>
-        <VisibilityIcon fontSize="small" />
+        {switchingTo === "viewer" ? (
+          <Loader size="xs" />
+        ) : (
+          <VisibilityIcon fontSize="small" />
+        )}
       </Group>
     ),
     value: "viewer",
@@ -24,7 +28,11 @@ const VIEW_OPTIONS = [
   {
     label: (
       <Group gap={4}>
-        <EditNoteIcon fontSize="small" />
+        {switchingTo === "pageEditor" ? (
+          <Loader size="xs" />
+        ) : (
+          <EditNoteIcon fontSize="small" />
+        )}
       </Group>
     ),
     value: "pageEditor",
@@ -32,15 +40,11 @@ const VIEW_OPTIONS = [
   {
     label: (
       <Group gap={4}>
-        <InsertDriveFileIcon fontSize="small" />
-      </Group>
-    ),
-    value: "fileManager",
-  },
-  {
-    label: (
-      <Group gap={4}>
-        <FolderIcon fontSize="small" />
+        {switchingTo === "fileEditor" ? (
+          <Loader size="xs" />
+        ) : (
+          <FolderIcon fontSize="small" />
+        )}
       </Group>
     ),
     value: "fileEditor",
@@ -50,13 +54,34 @@ const VIEW_OPTIONS = [
 interface TopControlsProps {
   currentView: string;
   setCurrentView: (view: string) => void;
+  selectedToolKey?: string | null;
 }
 
 const TopControls = ({
   currentView,
   setCurrentView,
+  selectedToolKey,
 }: TopControlsProps) => {
   const { themeMode, isRainbowMode, isToggleDisabled, toggleTheme } = useRainbowThemeContext();
+  const [switchingTo, setSwitchingTo] = useState<string | null>(null);
+  
+  const isToolSelected = selectedToolKey !== null;
+
+  const handleViewChange = useCallback((view: string) => {
+    // Show immediate feedback
+    setSwitchingTo(view);
+    
+    // Defer the heavy view change to next frame so spinner can render
+    requestAnimationFrame(() => {
+      // Give the spinner one more frame to show
+      requestAnimationFrame(() => {
+        setCurrentView(view);
+        
+        // Clear the loading state after view change completes
+        setTimeout(() => setSwitchingTo(null), 300);
+      });
+    });
+  }, [setCurrentView]);
 
   const getThemeIcon = () => {
     if (isRainbowMode) return <AutoAwesomeIcon className={rainbowStyles.rainbowText} />;
@@ -66,7 +91,9 @@ const TopControls = ({
 
   return (
     <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
-      <div className="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-auto flex gap-2 items-center">
+      <div className={`absolute left-4 pointer-events-auto flex gap-2 items-center ${
+        isToolSelected ? 'top-4' : 'top-1/2 -translate-y-1/2'
+      }`}>
         <Button
           onClick={toggleTheme}
           variant="subtle"
@@ -87,18 +114,24 @@ const TopControls = ({
         </Button>
         <LanguageSelector />
       </div>
-      <div className="flex justify-center items-center h-full pointer-events-auto">
-          <SegmentedControl
-            data={VIEW_OPTIONS}
-            value={currentView}
-            onChange={setCurrentView}
-            color="blue"
-            radius="xl"
-            size="md"
-            fullWidth
-            className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
-          />
-      </div>
+      {!isToolSelected && (
+        <div className="flex justify-center items-center h-full pointer-events-auto">
+            <SegmentedControl
+              data={createViewOptions(switchingTo)}
+              value={currentView}
+              onChange={handleViewChange}
+              color="blue"
+              radius="xl"
+              size="md"
+              fullWidth
+              className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
+              style={{
+                transition: 'all 0.2s ease',
+                opacity: switchingTo ? 0.8 : 1,
+              }}
+            />
+        </div>
+      )}
     </div>
   );
 };