feat: show loading animation for 2sec

src/renderer/App.css

@@ -33,4 +33,58 @@ textarea {
     background-color: rgb(152 151 149);
     border: 3px solid rgb(152 151 149);
   }
-}
+}
+
+/* loading animation */
+/* credit:https://loading.io/css/ */
+
+.lds-ripple,
+.lds-ripple div {
+  box-sizing: border-box;
+}
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid currentColor;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+@keyframes lds-ripple {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  5% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 1;
+  }
+  100% {
+    top: 0;
+    left: 0;
+    width: 80px;
+    height: 80px;
+    opacity: 0;
+  }
+}

src/renderer/App.tsx

@@ -4,7 +4,8 @@ import Home from './pages/Home';
 import './App.css';
 import { RootContextProvider } from './context/RootContext';
 import useDir from './hooks/useDir';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import Loading from './components/Loading';
 
 export default function App() {
   return (
@@ -21,6 +22,15 @@ export default function App() {
 function SetupApp() {
   const { rootDir } = useDir();
 
+  const [showLoading, setShowLoading] = useState(true);
+
+  // show loading animation for 2 seconds
+  useEffect(() => {
+    setTimeout(() => {
+      setShowLoading(false);
+    }, 2000);
+  }, []);
+
   useEffect(() => {
     // load-theme
     if (localStorage.getItem('color-theme') === 'dark') {
@@ -43,7 +53,9 @@ function SetupApp() {
     }
   }
 
-  if (rootDir) {
+  if (showLoading) {
+    return <Loading />;
+  } else if (rootDir) {
     return <Home />;
   } else {
     return <InitialSetup />;

src/renderer/components/Loading.tsx

@@ -0,0 +1,10 @@
+export default function Loading() {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen w-screen text-white bg-white dark:bg-[#1e1e1e]">
+      <div className="lds-ripple">
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  );
+}