diff --git a/src/Loader.tsx b/src/Loader.tsx
deleted file mode 100644
index a728531..0000000
--- a/src/Loader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { useEffect } from 'react';
-import App from './App';
-
-import { ChakraProvider } from '@chakra-ui/react';
-import { Provider } from 'react-redux';
-import { theme } from './theme';
-import { persistSettings } from './features/settings/persistSettings';
-import type { AppStore } from './store';
-
-export function Loader({ store }: { store: AppStore }) {
- useEffect(() => {
- return persistSettings(store);
- }, [store]);
-
- return (
-
-
-
-
-
-
-
- );
-}
diff --git a/src/App.tsx b/src/components/App.tsx
similarity index 87%
rename from src/App.tsx
rename to src/components/App.tsx
index cf4640d..5abf092 100644
--- a/src/App.tsx
+++ b/src/components/App.tsx
@@ -1,7 +1,7 @@
import { Box, Center, Container } from '@chakra-ui/react';
import { SelectFile } from './SelectFile';
-import { FileListing } from './features/file-listing/FileListing';
+import { FileListing } from '~/features/file-listing/FileListing';
import { Footer } from './Footer';
function App() {
diff --git a/src/components/AppRoot.tsx b/src/components/AppRoot.tsx
new file mode 100644
index 0000000..70d1115
--- /dev/null
+++ b/src/components/AppRoot.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import App from './App';
+
+import { ChakraProvider } from '@chakra-ui/react';
+import { Provider } from 'react-redux';
+import { theme } from '~/theme';
+import { persistSettings } from '~/features/settings/persistSettings';
+import { setupStore } from '~/store';
+
+// Private to this file only.
+const store = setupStore();
+
+export function AppRoot() {
+ useEffect(() => persistSettings(store), []);
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/CurrentYear.tsx b/src/components/CurrentYear.tsx
similarity index 100%
rename from src/CurrentYear.tsx
rename to src/components/CurrentYear.tsx
diff --git a/src/Footer.tsx b/src/components/Footer.tsx
similarity index 100%
rename from src/Footer.tsx
rename to src/components/Footer.tsx
diff --git a/src/SDKVersion.tsx b/src/components/SDKVersion.tsx
similarity index 100%
rename from src/SDKVersion.tsx
rename to src/components/SDKVersion.tsx
diff --git a/src/SelectFile.tsx b/src/components/SelectFile.tsx
similarity index 94%
rename from src/SelectFile.tsx
rename to src/components/SelectFile.tsx
index 181c6fe..fc0fd78 100644
--- a/src/SelectFile.tsx
+++ b/src/components/SelectFile.tsx
@@ -2,8 +2,8 @@ import { useDropzone } from 'react-dropzone';
import { Box, Text } from '@chakra-ui/react';
import { UnlockIcon } from '@chakra-ui/icons';
-import { useAppDispatch } from './hooks';
-import { addNewFile, processFile } from './features/file-listing/fileListingSlice';
+import { useAppDispatch } from '~/hooks';
+import { addNewFile, processFile } from '~/features/file-listing/fileListingSlice';
import { nanoid } from 'nanoid';
export function SelectFile() {
diff --git a/src/features/file-listing/FileListing.tsx b/src/features/file-listing/FileListing.tsx
index 5211cbf..09bec14 100644
--- a/src/features/file-listing/FileListing.tsx
+++ b/src/features/file-listing/FileListing.tsx
@@ -1,7 +1,7 @@
import { VStack } from '@chakra-ui/react';
import { selectFiles } from './fileListingSlice';
-import { useAppSelector } from '../../hooks';
+import { useAppSelector } from '~/hooks';
import { FileRow } from './FileRow';
export function FileListing() {
diff --git a/src/main.tsx b/src/main.tsx
index 469e6dc..d72bd43 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,10 @@
+import React from 'react';
import ReactDOM from 'react-dom/client';
-import { setupStore } from './store';
-import { Loader } from './Loader';
+import { AppRoot } from './components/AppRoot';
-// Private to this file only.
-const store = setupStore();
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render();
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+
+);