add: loading screen

app/lib/pages/default_page.dart

@@ -8,7 +8,7 @@ import 'marker_handler/get_relation.dart';
 import 'dart:typed_data';
 
 class DefaultPage extends StatefulWidget {
-  const DefaultPage({super.key});
+  const DefaultPage({Key? key}) : super(key: key);
 
   @override
   _DefaultPageState createState() => _DefaultPageState();
@@ -18,55 +18,23 @@ class _DefaultPageState extends State<DefaultPage> {
   late Timer _timer;
   bool showBar = false;
 
-  List<Measurement> markerList = [];
-  Uint8List relation = Uint8List(0);
+  late Future<List<Measurement>> markerListFuture;
+  late Future<Uint8List> relationFuture;
 
-  // Call fetchMarkerTemplate and await its result before setting the state
-  Future<void> loadMarkerList() async {
-    try {
-      List<Measurement> fetchedMarkers = await fetchMarkerData();
-      Uint8List fetchedRelation = await fetchRelation();
-
-      setState(() { // Initialise markers and relations
-        markerList = fetchedMarkers;
-        relation = fetchedRelation;
-      });
-    } catch (e) {
-      showDialog(
-        context: context,
-        builder: (BuildContext context) {
-          return AlertDialog(
-            title: const Text("Error"),
-            content: Text(e.toString()),
-            actions: [
-              TextButton(
-                onPressed: () {
-                  Navigator.of(context).pop();
-                },
-                child: const Text("OK"),
-              ),
-            ],
-          );
-        },
-      );
-    }
-  }
-
-  // State initializer
   @override
   void initState() {
     super.initState();
-    // Load marker data from server
-    loadMarkerList();
+    markerListFuture = fetchMarkerData();
+    relationFuture = fetchRelation();
 
     // Schedule fetchMarkerData to run periodically based on fetchInterval from consts
-    const Duration interval = Duration(minutes: fetchInterval);
+    const Duration interval = Duration(minutes: fetchInterval); // NB fetchInterval value to be determined
     _timer = Timer.periodic(interval, (timer) {
       fetchMarkerData();
     });
   }
 
-  // Fetch timer
+  // Fetch-interval timer
   @override
   void dispose() {
     // Cancel timer on widget termination
@@ -77,32 +45,48 @@ class _DefaultPageState extends State<DefaultPage> {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      home: Container(
-        decoration: const BoxDecoration( // Set background color
-          gradient: LinearGradient(
-            begin: Alignment.topCenter,
-            end: Alignment.bottomCenter,
-            colors: [darkBlue, darkestBlue],
-          ),
-        ),
-        child: Scaffold(
-          backgroundColor: Colors.transparent,
+      home: Scaffold(
         appBar: AppBar(
           title: const Text('IceMap'),
           actions: [
             IconButton(
               icon: const Icon(Icons.search),
               onPressed: () {
+                setState(() {
                   showBar = !showBar;
+                });
               },
             ),
           ],
         ),
-          body: ListView(
-            children: [ // Add main widget
+        body: FutureBuilder(
+          future: Future.wait([markerListFuture, relationFuture]),
+          builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
+            // Display loading screen until data is fetched
+            if (snapshot.connectionState == ConnectionState.waiting) {
+              return const Center(child: CircularProgressIndicator());
+            } else if (snapshot.hasError) {
+              return Center(child: Text('Error: ${snapshot.error}'));
+            } else {
+              // Display default page once all data is loaded from server
+              List<Measurement> markerList = snapshot.data![0] as List<Measurement>;
+              Uint8List relation = snapshot.data![1] as Uint8List;
+              return Container( // Return container with list view and background color
+                decoration: const BoxDecoration( // Set background color
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [darkBlue, darkestBlue],
+                  ),
+                ),
+                child: ListView(
+                  children: [
                     MapContainerWidget(markerList: markerList, relation: relation),
                   ],
                 ),
+              );
+            }
+          },
         ),
       ),
     );