From c42fe235c642441d6968ce67cd210883e78b0b97 Mon Sep 17 00:00:00 2001
From: Sophie Herold <sophie@hemio.de>
Date: Wed, 26 Apr 2023 18:15:36 +0200
Subject: [PATCH] imagePage: Make crossfade from spinner work

It did not work before because the spinner page did
not take up the complete stack.

Also hiding the spinner when animating out of it
since it can be pretty dominant. Especially, since
it's usually not really shown before but the animation
starts emediately instead.

Closes #153

Part-of: <https://gitlab.gnome.org/Incubator/loupe/-/merge_requests/205>
---
 data/gtk/image_page.ui    | 21 +++++++++++++++------
 src/widgets/image_page.rs | 15 +++++++++++++--
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/data/gtk/image_page.ui b/data/gtk/image_page.ui
index 560c5de..b1a10bc 100644
--- a/data/gtk/image_page.ui
+++ b/data/gtk/image_page.ui
@@ -43,10 +43,18 @@
       <object class="GtkStack" id="stack">
         <property name="transition-type">crossfade</property>
         <child>
-          <object class="GtkSpinner" id="spinner">
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <property name="spinning">True</property>
+          <object class="AdwBin" id="spinner_page">
+            <property name="hexpand">true</property>
+            <property name="vexpand">true</property>
+            <child>
+              <object class="GtkSpinner" id="spinner">
+                <property name="height-request">24</property>
+                <property name="width-request">24</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="spinning">True</property>
+              </object>
+            </child>
           </object>
         </child>
         <child>
@@ -88,7 +96,7 @@
                     <property name="tooltip-text" translatable="yes">Rotate Left</property>
                     <property name="action-name">win.rotate_ccw</property>
                     <style>
-                      <class name="flat" />
+                      <class name="flat"/>
                     </style>
                   </object>
                 </child>
@@ -98,7 +106,7 @@
                     <property name="tooltip-text" translatable="yes">Rotate Right</property>
                     <property name="action-name">win.rotate_cw</property>
                     <style>
-                      <class name="flat" />
+                      <class name="flat"/>
                     </style>
                   </object>
                 </child>
@@ -110,3 +118,4 @@
     </property>
   </template>
 </interface>
+
diff --git a/src/widgets/image_page.rs b/src/widgets/image_page.rs
index 1d432dc..a52f041 100644
--- a/src/widgets/image_page.rs
+++ b/src/widgets/image_page.rs
@@ -39,12 +39,14 @@ mod imp {
         #[template_child]
         pub(super) stack: TemplateChild<gtk::Stack>,
         #[template_child]
-        pub(super) spinner: TemplateChild<gtk::Spinner>,
+        pub(super) spinner_page: TemplateChild<gtk::Widget>,
         #[template_child]
         pub(super) error_page: TemplateChild<adw::StatusPage>,
         #[template_child]
         pub(super) image_stack_page: TemplateChild<gtk::Widget>,
         #[template_child]
+        pub(super) spinner: TemplateChild<gtk::Spinner>,
+        #[template_child]
         pub(super) scrolled_window: TemplateChild<gtk::ScrolledWindow>,
         #[template_child]
         pub(super) image: TemplateChild<LpImage>,
@@ -108,10 +110,20 @@ mod imp {
                     gesture.set_state(gtk::EventSequenceState::Claimed);
                 }));
 
+            self.stack
+                .connect_visible_child_notify(clone!(@weak obj => move |stack| {
+                    let imp = obj.imp();
+                    let spinner_visible =
+                        stack.visible_child().as_ref() == Some(imp.spinner_page.upcast_ref());
+                    // Hide spinner for crossfading into other content since it does not look great
+                    imp.spinner.set_visible(spinner_visible);
+                }));
+
             obj.image().connect_notify_local(
                 Some("is-loaded"),
                 clone!(@weak obj => move |_,_| {
                     if obj.image().is_loaded() {
+                        log::debug!("Showing image");
                         obj.imp()
                             .stack
                             .set_visible_child(&*obj.imp().image_stack_page);
@@ -127,7 +139,6 @@ mod imp {
                     }
                 }),
             );
-
             // Do not waste CPU on spinner if it is not visible
             self.spinner.connect_map(|s| s.start());
             self.spinner.connect_unmap(|s| s.stop());