From f2bc4a66b5b86119f14c145fc094c3a421f5f70e Mon Sep 17 00:00:00 2001
From: Sophie Herold <sophie@hemio.de>
Date: Mon, 29 Jul 2024 15:16:06 +0200
Subject: [PATCH] imagePage: Show spinner with small delay

That way, when quickly scrolling through images (holding down arrow
keys) no restarting spinner animations are shown in between.
---
 .../icons/scalable/actions/external-link-symbolic.svg |  2 ++
 src/widgets/image_page.rs                             | 11 +++++++++++
 src/widgets/image_page.ui                             |  8 +++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 data/resources/icons/scalable/actions/external-link-symbolic.svg

diff --git a/data/resources/icons/scalable/actions/external-link-symbolic.svg b/data/resources/icons/scalable/actions/external-link-symbolic.svg
new file mode 100644
index 0000000..e88a887
--- /dev/null
+++ b/data/resources/icons/scalable/actions/external-link-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 3 2 c -1.660156 0 -3 1.339844 -3 3 v 8 c 0 1.660156 1.339844 3 3 3 h 8 c 1.660156 0 3 -1.339844 3 -3 v -4 c 0 -0.550781 -0.449219 -1 -1 -1 s -1 0.449219 -1 1 v 4 c 0 0.554688 -0.445312 1 -1 1 h -8 c -0.554688 0 -1 -0.445312 -1 -1 v -8 c 0 -0.554688 0.445312 -1 1 -1 h 4 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m 7 -2 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 h 2.585938 l -5.292969 5.289062 c -0.390625 0.394532 -0.390625 1.027344 0 1.417969 s 1.023437 0.390625 1.414062 0 l 5.292969 -5.292969 v 2.585938 c 0 0.550781 0.449219 1 1 1 s 1 -0.449219 1 -1 v -5 c 0 -0.085938 -0.011719 -0.171875 -0.035156 -0.257812 c -0.023438 -0.085938 -0.054688 -0.167969 -0.101563 -0.242188 c -0.042969 -0.074219 -0.09375 -0.144531 -0.15625 -0.207031 c -0.015625 -0.011719 -0.03125 -0.023438 -0.046875 -0.035157 c -0.054687 -0.050781 -0.117187 -0.09375 -0.183594 -0.128906 c -0.035156 -0.019531 -0.074218 -0.035156 -0.113281 -0.0468748 c -0.050781 -0.0234374 -0.101562 -0.0390624 -0.15625 -0.0507812 c -0.039062 -0.0117188 -0.082031 -0.015625 -0.121093 -0.0195312 c -0.03125 -0.00781255 -0.058594 -0.00781255 -0.085938 -0.0117188 z m 0 0" fill="#222222"/></svg>
diff --git a/src/widgets/image_page.rs b/src/widgets/image_page.rs
index 90769c8..4302e7e 100644
--- a/src/widgets/image_page.rs
+++ b/src/widgets/image_page.rs
@@ -33,6 +33,8 @@ use crate::util::gettext::*;
 use crate::widgets::LpImage;
 
 mod imp {
+    use std::time::Duration;
+
     use super::*;
 
     #[derive(Debug, Default, CompositeTemplate, Properties)]
@@ -43,6 +45,8 @@ mod imp {
         pub(super) stack: TemplateChild<gtk::Stack>,
         #[template_child]
         pub(super) spinner_page: TemplateChild<gtk::Widget>,
+        #[template_child]
+        pub(super) spinner_revealer: TemplateChild<gtk::Revealer>,
 
         #[template_child]
         pub(super) error_page: TemplateChild<adw::StatusPage>,
@@ -146,6 +150,13 @@ mod imp {
                     glib::spawn_future_local(async move { obj.show_error().await });
                 }
             ));
+
+            self.spinner_revealer.connect_map(|revealer| {
+                let revealer = revealer.clone();
+                glib::timeout_add_local_once(Duration::from_millis(200), move || {
+                    revealer.set_reveal_child(true);
+                });
+            });
         }
     }
 
diff --git a/src/widgets/image_page.ui b/src/widgets/image_page.ui
index 4bc52f2..8668d5f 100644
--- a/src/widgets/image_page.ui
+++ b/src/widgets/image_page.ui
@@ -47,7 +47,13 @@
             <property name="hexpand">true</property>
             <property name="vexpand">true</property>
             <child>
-              <object class="AdwSpinner" id="spinner" />
+              <object class="GtkRevealer" id="spinner_revealer">
+                <property name="reveal-child">false</property>
+                <property name="transition-type">crossfade</property>
+                <child>
+                  <object class="AdwSpinner" id="spinner" />
+                </child>
+              </object>
             </child>
           </object>
         </child>