Impl web page loading container

mbakgun · Oct 3, 2024 · 21a2ffc · 21a2ffc
1 parent 627e22d
commit 21a2ffc
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 0 deletions.
diff --git a/wasmApp/src/wasmJsMain/kotlin/com/mbakgun/mj/Main.kt b/wasmApp/src/wasmJsMain/kotlin/com/mbakgun/mj/Main.kt
@@ -5,6 +5,7 @@ import androidx.compose.ui.window.CanvasBasedWindow
 import di.initKoin
 import domain.usecase.MjImagesFetchUseCase
 import domain.usecase.MjImagesUseCase
+import kotlinx.browser.document
 import ui.MjImagesApp
 import ui.MjImagesViewModel
 
@@ -18,4 +19,5 @@ fun main() {
     CanvasBasedWindow("MjImagesApp") {
         MjImagesApp(viewModel)
     }
+    document.getElementById("loader-container")?.remove()
 }
diff --git a/wasmApp/src/wasmJsMain/resources/index.html b/wasmApp/src/wasmJsMain/resources/index.html
@@ -2,9 +2,54 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MjImagesApp</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+            background-color: #FFFBFF;
+        }
+        #loader-container {
+            position: fixed;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #825500;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        .spinner::after {
+            content: '';
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            border: 2px solid transparent;
+            border-top-color: #FFFFFF;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
 </head>
 <body>
+<div id="loader-container">
+    <div class="spinner"></div>
+</div>
 <canvas id="ComposeTarget"></canvas>
 <script src="wasmApp.js"></script>
 </body>

diff --git a/webApp/src/jsMain/kotlin/com/mbakgun/mj/Main.kt b/webApp/src/jsMain/kotlin/com/mbakgun/mj/Main.kt
@@ -5,6 +5,7 @@ import androidx.compose.ui.window.CanvasBasedWindow
 import di.initKoin
 import domain.usecase.MjImagesFetchUseCase
 import domain.usecase.MjImagesUseCase
+import kotlinx.browser.document
 import org.jetbrains.skiko.wasm.onWasmReady
 import ui.MjImagesApp
 import ui.MjImagesViewModel
@@ -20,5 +21,6 @@ fun main() {
         CanvasBasedWindow("MjImagesApp") {
             MjImagesApp(viewModel)
         }
+        document.getElementById("loader-container")?.remove()
     }
 }
diff --git a/webApp/src/jsMain/resources/index.html b/webApp/src/jsMain/resources/index.html
@@ -2,10 +2,55 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MjImagesApp</title>
     <script src="skiko.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+            background-color: #FFFBFF;
+        }
+        #loader-container {
+            position: fixed;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #825500;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        .spinner::after {
+            content: '';
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            border: 2px solid transparent;
+            border-top-color: #FFFFFF;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
 </head>
 <body>
+<div id="loader-container">
+    <div class="spinner"></div>
+</div>
 <div>
     <canvas id="ComposeTarget"></canvas>
 </div>