frontend: add Loading

frontend/src/components/Loading.css

@@ -0,0 +1,29 @@
+.spinner {
+    font-size: 100px; /* Adjust size as needed */
+    animation: spin 2s linear infinite; /* Spin animation */
+    position: fixed; /* Keep the snowflake in a fixed position */
+    top: 50%; /* Adjust vertical position */
+    left: 50%; /* Center horizontally */
+    transform: translateX(-50%); /* Center the snowflake */
+    z-index: 10000; /* Ensure it's above the full-screen loading */
+}
+
+/* Keyframes for spinning */
+@keyframes spin {
+    0% { transform: translateX(-50%) rotate(0deg); }
+    100% { transform: translateX(-50%) rotate(360deg); }
+}
+
+
+.full-screen {
+    display: flex; /* Use flexbox for centering */
+    align-items: center; /* Center vertically */
+    justify-content: center; /* Center horizontally */
+    height: 100vh; /* Full viewport height */
+    width: 100vw; /* Full viewport width */
+    background-color: rgba(4, 0, 0); /* Semi-transparent background */
+    position: fixed; /* Fix it in the viewport */
+    top: 0; 
+    left: 0; 
+    z-index: 9999; /* Ensure it's above other content */
+}