"flat" style GtkButton shrinks embedded child GtkSpinner

I have a button defined in a header bar:

Gtk.Button refresh_button {
  styles ["flat"]
  action-name: "app.refresh";
  child: Gtk.Stack refresh_button_stack {
    transition-type: crossfade;
    Gtk.StackPage {
      name: "sensitive";
      child: Gtk.Image {
        icon-name: "view-refresh-symbolic";
      };
    }
    Gtk.StackPage {
      name: "spinner";
      child: Gtk.Spinner {
        spinning: true;
      };
    }
  };
}

When this button is clicked, a callback function gets called that sets the visible stack page and button sensitive state:

private void update_refresh_button () {
    Application application = GLib.Application.get_default () as Application;
    this.refresh_button_stack.visible_child_name = application.is_refreshing ? "spinner" : "sensitive";
    this.refresh_button.sensitive = !application.is_refreshing;
}

When the GtkButton is styled with the “flat” style, the spinner appears to shrink momentarily during visibility.

flat

This doesn’t happen when the button style is omitted.

normal

Can I tweak the margins of the stack or stack pages to use the flat style, but not shrink the spinner?

I was able to “fix” this and get the visual effect I desired by switching around the parent/child relationship. Rather than embedding a GtkStack inside a GtkButton, I put the GtkStack as the outermost widget and created two GtkStackPages: one containing the button and the other containing a clamped spinner.

diff --git a/src/window.blp b/src/window.blp
index e13cb673789fb7947feeb8e9c7a71f8ff2df453b..439766381776a4edc6ceb58efb528c379e410813 100644
--- a/src/window.blp
+++ b/src/window.blp
@@ -152,23 +152,24 @@ template DamaskWindow : Adw.ApplicationWindow {
           }
 
           [end]
-          Gtk.Button refresh_button {
-            action-name: "app.refresh";
-            child: Gtk.Stack refresh_button_stack {
-              transition-type: crossfade;
-              Gtk.StackPage {
-                name: "sensitive";
-                child: Gtk.Image {
-                  icon-name: "view-refresh-symbolic";
-                };
-              }
-              Gtk.StackPage {
-                name: "spinner";
+          Gtk.Stack refresh_button_stack {
+            transition-type: crossfade;
+            Gtk.StackPage {
+              name: "sensitive";
+              child: Gtk.Button refresh_button {
+                action-name: "app.refresh";
+                icon-name: "view-refresh-symbolic";
+              };
+            }
+            Gtk.StackPage {
+              name: "spinner";
+              child: Adw.Clamp {
+                maximum-size: 16;
                 child: Gtk.Spinner {
                   spinning: true;
                 };
-              }
-            };
+              };
+            }
           }
         }

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.