feat: add new loading overlay for dithering process

tfuxu · Apr 26, 2024 · b9f3e86 · b9f3e86
1 parent 405c0d0
commit b9f3e86
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 60 deletions.
diff --git a/data/ui/dither_page.blp b/data/ui/dither_page.blp
@@ -82,69 +82,81 @@ template $HalftoneDitherPage: Adw.BreakpointBin {
         vexpand: true;
         hexpand: true;
 
-        Gtk.Stack preview_group_stack {
-          height-request: 150;
-          transition-type: crossfade;
-
-          Gtk.StackPage {
-            name: "preview_stack_main_page";
-
-            child: Gtk.Overlay {
-              child: Gtk.ScrolledWindow preview_scroll_window {
-                vexpand: true;
-                hexpand: true;
-
-                Gtk.Picture image_dithered {
-                  content-fit: cover;
-                  can-shrink: false;
-                  halign: center;
-                  valign: center;
-                }
-              };
-
-              [overlay]
-              Gtk.Button toggle_sheet_button {
-                halign: start;
-                valign: end;
-                icon-name: "sidebar-show-left-symbolic";
-                action-name: "app.toggle-sheet";
-                tooltip-text: _("Toggle Sidebar");
-
-                styles [
-                  "osd",
-                  "circular",
-                  "custom-on-image"
-                ]
-              }
-
-              [overlay]
-              Gtk.Button {
-                halign: end;
-                valign: end;
-                icon-name: "adw-external-link-symbolic";
-                tooltip-text: _("Open in External Image Viewer");
-                action-name: "app.show-preview-image";
-
-                styles [
-                  "osd",
-                  "circular",
-                  "custom-on-image"
-                ]
+        Gtk.Overlay {
+          child: Gtk.Overlay {
+            child: Gtk.ScrolledWindow preview_scroll_window {
+              vexpand: true;
+              hexpand: true;
+
+              Gtk.Picture image_dithered {
+                content-fit: cover;
+                can-shrink: false;
+                halign: center;
+                valign: center;
               }
             };
-          }
 
-          Gtk.StackPage {
-            name: "preview_stack_loading_page";
+            [overlay]
+            Gtk.Button toggle_sheet_button {
+              halign: start;
+              valign: end;
+              icon-name: "sidebar-show-left-symbolic";
+              action-name: "app.toggle-sheet";
+              tooltip-text: _("Toggle Sidebar");
+
+              styles [
+                "osd",
+                "circular",
+                "custom-on-image"
+              ]
+            }
+
+            [overlay]
+            Gtk.Button {
+              halign: end;
+              valign: end;
+              icon-name: "adw-external-link-symbolic";
+              tooltip-text: _("Open in External Image Viewer");
+              action-name: "app.show-preview-image";
+
+              styles [
+                "osd",
+                "circular",
+                "custom-on-image"
+              ]
+            }
+          };
+
+          [overlay]
+          Gtk.Box preview_loading_overlay {
+            vexpand: true;
+            hexpand: true;
+            orientation: vertical;
+            visible: false;
 
-            child: Gtk.Box {
+            Gtk.Box {
+              vexpand: true;
+              hexpand: true;
               valign: center;
               halign: center;
+              spacing: 10;
+              orientation: vertical;
 
               Gtk.Spinner {
+                height-request: 64;
+                width-request: 64;
+
                 spinning: true;
               }
-            };
+
+              Gtk.Label {
+                label: _("Dithering your image…");
+              }
+            }
+
+            styles [
+              "osd"
+            ]
           }
         }
 

diff --git a/halftone/views/dither_page.py b/halftone/views/dither_page.py
@@ -57,7 +57,7 @@ class HalftoneDitherPage(Adw.BreakpointBin):
     save_image_chooser = Gtk.Template.Child()
     all_filter = Gtk.Template.Child()
 
-    preview_group_stack = Gtk.Template.Child()
+    preview_loading_overlay = Gtk.Template.Child()
 
     mobile_breakpoint = Gtk.Template.Child()
 
@@ -117,9 +117,6 @@ def setup_signals(self):
             self.update_preview_content_fit)
 
     def setup(self):
-        # Set default preview stack child
-        self.preview_group_stack.set_visible_child_name("preview_stack_loading_page")
-
         # Set utility page in sidebar by default
         self.sidebar_view.set_content(self.image_prefs_bin)
 
@@ -192,7 +189,6 @@ def update_preview_image(self, path: str, output_options: OutputOptions,
             raise
 
         self.image_dithered.set_paintable(self.updated_paintable)
-        self.on_successful_image_load()
 
         if callback:
             callback()
@@ -384,11 +380,13 @@ def on_save_format_selected(self, widget, *args):
         self.output_options.output_format = format_string
 
     def on_successful_image_load(self, *args):
-        self.preview_group_stack.set_visible_child_name("preview_stack_main_page")
+        self.preview_loading_overlay.set_visible(False)
+        self.image_dithered.remove_css_class("preview-loading-blur")
         self.save_image_button.set_sensitive(True)
 
     def on_awaiting_image_load(self, *args):
-        self.preview_group_stack.set_visible_child_name("preview_stack_loading_page")
+        self.preview_loading_overlay.set_visible(True)
+        self.image_dithered.add_css_class("preview-loading-blur")
         self.save_image_button.set_sensitive(False)
 
     def on_breakpoint_apply(self, *args):