Fixed Dockerfile and Loading component

src/App.tsx

@@ -10,3 +10,4 @@ export default function App() {
     </div>
   );
 }
+ 

src/Components/Loading.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Loading = () => {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
+    </div>
+  );
+};
+
+export default Loading;

src/main.tsx

@@ -5,11 +5,12 @@ import "./index.css";
 import { BrowserRouter } from "react-router-dom";
 
 import "./i18n";
+import Loading from "./Components/Loading.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <BrowserRouter>
     <React.StrictMode>
-      <Suspense fallback="...is loading">
+      <Suspense fallback={<Loading />}>
         <App />
       </Suspense>
     </React.StrictMode>