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/SkeletonLoader.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Box, Group, Stack } from '@mantine/core';
+
+interface SkeletonLoaderProps {
+  type: 'pageGrid' | 'fileGrid' | 'controls' | 'viewer';
+  count?: number;
+  animated?: boolean;
+}
+
+const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ 
+  type, 
+  count = 8, 
+  animated = true 
+}) => {
+  const animationStyle = animated ? { animation: 'pulse 2s infinite' } : {};
+
+  const renderPageGridSkeleton = () => (
+    <div style={{ 
+      display: 'grid', 
+      gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', 
+      gap: '1rem' 
+    }}>
+      {Array.from({ length: count }).map((_, i) => (
+        <Box
+          key={i}
+          w="100%"
+          h={240}
+          bg="gray.1"
+          style={{ 
+            borderRadius: '8px',
+            ...animationStyle,
+            animationDelay: animated ? `${i * 0.1}s` : undefined
+          }}
+        />
+      ))}
+    </div>
+  );
+
+  const renderFileGridSkeleton = () => (
+    <div style={{ 
+      display: 'grid', 
+      gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', 
+      gap: '1rem' 
+    }}>
+      {Array.from({ length: count }).map((_, i) => (
+        <Box
+          key={i}
+          w="100%"
+          h={280}
+          bg="gray.1"
+          style={{ 
+            borderRadius: '8px',
+            ...animationStyle,
+            animationDelay: animated ? `${i * 0.1}s` : undefined
+          }}
+        />
+      ))}
+    </div>
+  );
+
+  const renderControlsSkeleton = () => (
+    <Group mb="md">
+      <Box w={150} h={36} bg="gray.1" style={{ borderRadius: 4, ...animationStyle }} />
+      <Box w={120} h={36} bg="gray.1" style={{ borderRadius: 4, ...animationStyle }} />
+      <Box w={100} h={36} bg="gray.1" style={{ borderRadius: 4, ...animationStyle }} />
+    </Group>
+  );
+
+  const renderViewerSkeleton = () => (
+    <Stack gap="md" h="100%">
+      {/* Toolbar skeleton */}
+      <Group>
+        <Box w={40} h={40} bg="gray.1" style={{ borderRadius: 4, ...animationStyle }} />
+        <Box w={40} h={40} bg="gray.1" style={{ borderRadius: 4, ...animationStyle }} />
+        <Box w={80} h={40} bg="gray.1" style={{ borderRadius: 4, ...animationStyle }} />
+        <Box w={40} h={40} bg="gray.1" style={{ borderRadius: 4, ...animationStyle }} />
+      </Group>
+      {/* Main content skeleton */}
+      <Box 
+        flex={1} 
+        bg="gray.1" 
+        style={{ 
+          borderRadius: '8px',
+          ...animationStyle 
+        }} 
+      />
+    </Stack>
+  );
+
+  switch (type) {
+    case 'pageGrid':
+      return renderPageGridSkeleton();
+    case 'fileGrid':
+      return renderFileGridSkeleton();
+    case 'controls':
+      return renderControlsSkeleton();
+    case 'viewer':
+      return renderViewerSkeleton();
+    default:
+      return null;
+  }
+};
+
+export default SkeletonLoader;