src/Loader.tsx

@@ -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 (
-    <React.StrictMode>
-      <ChakraProvider theme={theme}>
-        <Provider store={store}>
-          <App />
-        </Provider>
-      </ChakraProvider>
-    </React.StrictMode>
-  );
-}

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() {

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 (
+    <ChakraProvider theme={theme}>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </ChakraProvider>
+  );
+}

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() {

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() {

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(<Loader store={store} />);
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <AppRoot />
+  </React.StrictMode>
+);