Merge pull request #43 from headlines-toolkit/feature_web_build_loading_screen

Feature web build loading screen

Author: fulleni

lib/main.dart

@@ -1,6 +1,8 @@
+import 'dart:js_interop';
+
+import 'package:device_preview/device_preview.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:device_preview/device_preview.dart';
 import 'package:ht_main/app/config/config.dart';
 import 'package:ht_main/bootstrap.dart';
 
@@ -9,6 +11,9 @@ import 'package:ht_main/bootstrap.dart';
 // production/development/demo
 const currentEnvironment = AppEnvironment.demo;
 
+@JS('removeSplashFromWeb')
+external void removeSplashFromWeb();
+
 void main() async {
   final appConfig = switch (currentEnvironment) {
     AppEnvironment.production => AppConfig.production(),
@@ -18,13 +23,17 @@ void main() async {
 
   final appWidget = await bootstrap(appConfig);
 
+  // Only remove the splash screen on web after the app is ready.
+  if (kIsWeb) {
+    removeSplashFromWeb();
+  }
+
   if (appConfig.environment == AppEnvironment.demo) {
     runApp(
       DevicePreview(
         enabled: true,
         builder: (context) => appWidget,
         tools: const [DeviceSection()],
-        
       ),
     );
   } else {

pubspec.lock

@@ -501,10 +501,18 @@ packages:
     dependency: transitive
     description:
       name: js
-      sha256: "53385261521cc4a0c4658fd0ad07a7d14591cf8fc33abbceae306ddb974888dc"
+      sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.2"
+    version: "0.6.7"
+  js_interop:
+    dependency: "direct main"
+    description:
+      name: js_interop
+      sha256: "7ec859c296958ccea34dc770504bd3ff4ae52fdd9e7eeb2bacc7081ad476a1f5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.1"
   json_annotation:
     dependency: transitive
     description:

pubspec.yaml

@@ -57,6 +57,7 @@ dependencies:
     git:
       url: https://github.com/headlines-toolkit/ht-shared.git
   intl: ^0.20.2
+  js_interop: ^0.0.1
   meta: ^1.16.0
   share_plus: ^11.0.0
   stream_transform: ^2.1.1

web/index.html

@@ -31,14 +31,14 @@
   <link rel="manifest" href="manifest.json">
   <style id="splash-screen-style">
     html {
-      height: 100%
+      height: 100%;
     }
 
     body {
       margin: 0;
       min-height: 100%;
       background-color: #FFFFFF;
-          background-size: 100% 100%;
+      background-size: 100% 100%;
     }
 
     .center {
@@ -51,19 +51,22 @@
     }
 
     .contain {
-      display:block;
-      width:100%; height:100%;
+      display: block;
+      width: 100%;
+      height: 100%;
       object-fit: contain;
     }
 
     .stretch {
-      display:block;
-      width:100%; height:100%;
+      display: block;
+      width: 100%;
+      height: 100%;
     }
 
     .cover {
-      display:block;
-      width:100%; height:100%;
+      display: block;
+      width: 100%;
+      height: 100%;
       object-fit: cover;
     }
 
@@ -90,22 +93,61 @@
     @media (prefers-color-scheme: dark) {
       body {
         background-color: #212121;
-          }
+      }
+    }
+
+    /* Styles for the loading indicator */
+    #loading-indicator {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #FFFFFF; /* Match body background */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999; /* Ensure it's on top */
+    }
+
+    @media (prefers-color-scheme: dark) {
+      #loading-indicator {
+        background-color: #212121; /* Match dark mode body background */
+      }
+    }
+
+    /* Simple spinner animation */
+    .spinner {
+      border: 4px solid rgba(0, 0, 0, 0.1);
+      border-left-color: #0175C2; /* Use theme color from manifest */
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
     }
   </style>
   <script id="splash-screen-script">
     function removeSplashFromWeb() {
       document.getElementById("splash")?.remove();
       document.getElementById("splash-branding")?.remove();
+      document.getElementById("loading-indicator")?.remove(); // Remove the new loading indicator
       document.body.style.background = "transparent";
     }
   </script>
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 </head>
 <body>
+  <div id="loading-indicator">
+    <div class="spinner"></div>
+  </div>
   <script>
     {{flutter_bootstrap_js}}
   </script>
 
 
-</body></html>
+</body></html>