diff --git a/src/components/LoadingScreen/LoadingScreen.module.css b/src/components/LoadingScreen/LoadingScreen.module.css
index 19f4318..a2d0fe1 100644
--- a/src/components/LoadingScreen/LoadingScreen.module.css
+++ b/src/components/LoadingScreen/LoadingScreen.module.css
@@ -1,4 +1,7 @@
 .container {
+    position: fixed;
+    inset: 0;
+
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -14,6 +17,11 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
+
+    z-index: 10000;
+
+    opacity: 1;
+    transition: opacity 250ms;
 }
 
 .factContainer {
@@ -59,7 +67,7 @@
     background: var(--accent);
 
     animation-name: progressAnimation;
-    animation-duration: 2s;
+    animation-duration: 1s;
 }
 
 @keyframes progressAnimation {
diff --git a/src/components/LoadingScreen/index.tsx b/src/components/LoadingScreen/index.tsx
index 6a5d0ef..1e0b529 100644
--- a/src/components/LoadingScreen/index.tsx
+++ b/src/components/LoadingScreen/index.tsx
@@ -1,8 +1,12 @@
 import styles from "./LoadingScreen.module.css";
 import * as Progress from "@radix-ui/react-progress";
 
-const LoadingScreen: React.FC = () => {
-    return <div className={styles.container}>
+interface Props {
+    fadeOut: boolean;
+}
+
+const LoadingScreen: React.FC<Props> = (props: Props) => {
+    return <div className={styles.container} style={{opacity: props.fadeOut ? 0 : 1}}>
         <Progress.Root className={styles.progressRoot}>
             <Progress.Indicator className={styles.progressIndicator} />
         </Progress.Root>
diff --git a/src/main.tsx b/src/main.tsx
index 4d2dc08..cdfd3f2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -14,12 +14,18 @@ import { error as LogError } from "tauri-plugin-log-api";
 import { serializeError } from "serialize-error";
 import LoadingScreen from "./components/LoadingScreen";
 
+enum LoadingState {
+    "LOADING",
+    "FADE_OUT",
+    "DONE"
+}
+
 window.addEventListener("error", event => {
     LogError(JSON.stringify(serializeError(event)));
 });
 
 const App: React.FC = () => {
-    const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState(LoadingState.LOADING);
     const [error, setError] = useState<unknown>(null);
 
     useEffect(() => {
@@ -28,26 +34,27 @@ const App: React.FC = () => {
                 await invoke("init");
 
                 // Add a tiny bit of delay so the loading screen doesn't just instantly disappear
-                await new Promise(r => setTimeout(r, 500));
+                await new Promise(r => setTimeout(r, 250));
             } catch (e) {
                 console.error(e);
                 LogError(JSON.stringify(serializeError(e)));
 
+                // If there's an error, just instantly hide the loading screen
                 setError(e);
-            } finally {
-                setLoading(false);
+                setLoading(LoadingState.DONE);
+
+                return;
             }
+
+            // The loading screen takes 250ms to fade out
+            setLoading(LoadingState.FADE_OUT);
+            await new Promise(r => setTimeout(r, 250));
+
+            // Done!
+            setLoading(LoadingState.DONE);
         })();
     }, []);
 
-    // Show loading screen
-    if (loading) {
-        return <React.StrictMode>
-            <TitleBar />
-            <LoadingScreen />
-        </React.StrictMode>;
-    }
-
     // Show error screen
     if (error) {
         return <React.StrictMode>
@@ -64,6 +71,10 @@ const App: React.FC = () => {
 
     // Show main screen
     return <React.StrictMode>
+        {loading != LoadingState.DONE &&
+            <LoadingScreen fadeOut={loading == LoadingState.FADE_OUT} />
+        }
+
         <ErrorBoundary FallbackComponent={ErrorScreen} onError={onError}>
             <DialogProvider>
                 <TitleBar />