Added Overlay widget for having better UX while waiting

assets/completed.json

@@ -0,0 +1 @@
+{"v":"5.1.16","fr":29.9700012207031,"ip":0,"op":30.0000012219251,"w":500,"h":500,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-158,21],[-63,116],[162,-109]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.129411764706,0.8,0.223529411765,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":36,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[100]},{"t":20.0000008146167}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":-149.000006068894,"op":40.0000016292334,"st":-149.000006068894,"bm":0}],"markers":[]}

lib/consts.dart

@@ -1,9 +1,10 @@
-import 'dart:io';
 import 'dart:convert';
+import 'dart:io';
+
+import 'package:davi/davi.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
-import 'package:davi/davi.dart';
 
 const kDiscordUrl = "https://bit.ly/heyfoss";
 const kGitUrl = "https://github.com/foss42/apidash";
@@ -25,6 +26,7 @@ final kColorTransparentState =
     MaterialStateProperty.all<Color>(Colors.transparent);
 const kColorTransparent = Colors.transparent;
 const kColorWhite = Colors.white;
+const kColorBlack = Colors.black;
 const kColorRed = Colors.red;
 final kColorLightDanger = Colors.red.withOpacity(0.9);
 const kColorDarkDanger = Color(0xffcf6679);
@@ -47,6 +49,7 @@ final kCodeStyle = TextStyle(
 
 const kHintOpacity = 0.6;
 const kForegroundOpacity = 0.05;
+const kOverlayBackgroundOpacity = 0.5;
 
 const kTextStyleButton = TextStyle(fontWeight: FontWeight.bold);
 const kTextStyleButtonSmall = TextStyle(fontSize: 12);
@@ -79,6 +82,7 @@ const kPh20t40 = EdgeInsets.only(
   top: 40,
 );
 const kPh60 = EdgeInsets.symmetric(horizontal: 60);
+const kPh60v60 = EdgeInsets.symmetric(vertical: 60, horizontal: 60);
 const kP24CollectionPane = EdgeInsets.only(
   top: 24,
   left: 4.0,
@@ -522,3 +526,5 @@ const kLabelBusy = "Busy";
 const kLabelCopy = "Copy";
 const kLabelSave = "Save";
 const kLabelDownload = "Download";
+const kLabelSaving = "Saving";
+const kLabelSaved = "Saved";

lib/screens/home_page/collection_pane.dart

@@ -1,9 +1,10 @@
+import 'package:apidash/consts.dart';
+import 'package:apidash/models/models.dart';
+import 'package:apidash/providers/providers.dart';
+import 'package:apidash/widgets/overlay_widget.dart';
+import 'package:apidash/widgets/widgets.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:apidash/providers/providers.dart';
-import 'package:apidash/widgets/widgets.dart';
-import 'package:apidash/models/models.dart';
-import 'package:apidash/consts.dart';
 
 class CollectionPane extends ConsumerWidget {
   const CollectionPane({
@@ -12,7 +13,7 @@ class CollectionPane extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var sm = ScaffoldMessenger.of(context);
+    final overlayWidget = OverlayWidgetTemplate(context: context);
     final collection = ref.watch(collectionStateNotifierProvider);
     final savingData = ref.watch(saveDataStateProvider);
     if (collection == null) {
@@ -34,12 +35,16 @@ class CollectionPane extends ConsumerWidget {
                   onPressed: savingData
                       ? null
                       : () async {
+                          overlayWidget.show(widget: const SavingOverlay());
+
                           await ref
                               .read(collectionStateNotifierProvider.notifier)
                               .saveData();
 
-                          sm.hideCurrentSnackBar();
-                          sm.showSnackBar(getSnackBar("Saved"));
+                          overlayWidget.hide();
+                          overlayWidget.show(widget: const CompletedOverlay());
+                          await Future.delayed(const Duration(seconds: 1));
+                          overlayWidget.hide();
                         },
                   icon: const Icon(
                     Icons.save,

lib/widgets/overlay_widget.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
+
+import '../consts.dart';
+
+class OverlayWidgetTemplate {
+  OverlayEntry? _overlay;
+  BuildContext context;
+  OverlayState? _overlayState;
+  OverlayWidgetTemplate({required this.context}) {
+    _overlayState = Overlay.of(context);
+  }
+
+  void show({required Widget widget}) {
+    if (_overlay == null) {
+      _overlay = OverlayEntry(
+        // replace with your own layout
+        builder: (context) => ColoredBox(
+            color: kColorBlack.withOpacity(kOverlayBackgroundOpacity),
+            child: widget),
+      );
+      _overlayState!.insert(_overlay!);
+    }
+  }
+
+  void hide() {
+    if (_overlay != null) {
+      _overlay?.remove();
+      _overlay = null;
+    }
+  }
+}
+
+class SavingOverlay extends StatelessWidget {
+  const SavingOverlay({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Card(
+        child: Padding(
+          padding: kPh60v60,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Lottie.asset("assets/saving.json", width: 100, height: 100),
+              kHSpacer20,
+              const Text(
+                kLabelSaving,
+                style: TextStyle(
+                  fontSize: kDefaultFontSize,
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class CompletedOverlay extends StatelessWidget {
+  const CompletedOverlay({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Card(
+        child: Padding(
+          padding: kPh60v60,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Lottie.asset("assets/completed.json",
+                  width: 100, height: 100, repeat: false),
+              kHSpacer20,
+              const Text(
+                kLabelSaved,
+                style: TextStyle(fontSize: kDefaultFontSize),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}