create a loading screen, downlaod and handle resource files

package.json

@@ -27,6 +27,7 @@
     "react-native-animatable": "^1.4.0",
     "react-native-big-list": "^1.6.1",
     "react-native-web": "^0.19.7",
+    "tauri-plugin-upload-api": "https://github.com/tauri-apps/tauri-plugin-upload#v1",
     "zustand": "^4.4.1"
   },
   "devDependencies": {

public/main.css

@@ -38,11 +38,11 @@
 }
 
 #scroll-light::-webkit-scrollbar-track {
-  background: #1A1A1E4D;
+  background: #1a1a1e4d;
 }
 
 #scroll-light {
-  scrollbar-color: #1A1A1E4D #1A1A1E4D;
+  scrollbar-color: #1a1a1e4d #1a1a1e4d;
   scrollbar-width: thin;
   overflow: overlay !important;
 }
@@ -57,23 +57,23 @@
 }
 
 #scroll-light::-webkit-scrollbar-thumb:vertical {
-  background: linear-gradient(to left, #1A1A1E4D 1px, transparent 0%);
+  background: linear-gradient(to left, #1a1a1e4d 1px, transparent 0%);
 }
 
 #scroll-light::-webkit-scrollbar-thumb:horizontal {
-  background: linear-gradient(to bottom, #1A1A1E4D 1px, transparent 0%);
+  background: linear-gradient(to bottom, #1a1a1e4d 1px, transparent 0%);
 }
 
 #scroll-light::-webkit-scrollbar-track:vertical {
-  background: linear-gradient(to left, #1A1A1E4D 1px, transparent 0%);
+  background: linear-gradient(to left, #1a1a1e4d 1px, transparent 0%);
 }
 
 #scroll-light::-webkit-scrollbar-track:horizontal {
-  background: linear-gradient(to bottom, #1A1A1E4D 1px, transparent 0%);
+  background: linear-gradient(to bottom, #1a1a1e4d 1px, transparent 0%);
 }
 
 #scroll-light::-webkit-scrollbar-thumb:hover {
-  background: #1A1A1E99;
+  background: #1a1a1e99;
 }
 
 .titlebar-button:hover {
@@ -89,3 +89,103 @@
   font-family: "Proxima Nova Semibold";
   src: url("fonts/Proxima Nova Semibold.woff2") format("woff2");
 }
+
+.loader-dark {
+  position: relative;
+  border-radius: 1000px;
+  background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
+  animation: animate 1.2s linear infinite;
+}
+
+@keyframes animate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader-dark span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 1000px;
+  background: linear-gradient(#8477b7, #1f1f23);
+}
+
+.loader-dark span:nth-child(1) {
+  filter: blur(5px);
+}
+
+.loader-dark span:nth-child(2) {
+  filter: blur(10px);
+}
+
+.loader-dark span:nth-child(3) {
+  filter: blur(25px);
+}
+
+.loader-dark span:nth-child(4) {
+  filter: blur(50px);
+}
+
+.loader-dark:after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  border-radius: 1000px;
+}
+
+.loader-light {
+  position: relative;
+  border-radius: 1000px;
+  background: linear-gradient(#8477b7, #ffffff);
+  animation: animate 1.2s linear infinite;
+}
+
+@keyframes animate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader-light span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 1000px;
+  background: linear-gradient(#8477b7, #ffffff);
+}
+
+.loader-light span:nth-child(1) {
+  filter: blur(5px);
+}
+
+.loader-light span:nth-child(2) {
+  filter: blur(10px);
+}
+
+.loader-light span:nth-child(3) {
+  filter: blur(25px);
+}
+
+.loader-light span:nth-child(4) {
+  filter: blur(50px);
+}
+
+.loader-light:after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  border-radius: 1000px;
+}