Made the loading screen fade out

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 {

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>

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 />