appmenu: add loading spinner indicator

unite@hardpixel.eu/buttons.js

@@ -4,30 +4,40 @@ import Clutter from 'gi://Clutter'
 import { AppMenu } from 'resource:///org/gnome/shell/ui/appMenu.js'
 import * as Main from 'resource:///org/gnome/shell/ui/main.js'
 import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js'
+import * as Animation from 'resource:///org/gnome/shell/ui/animation.js'
 
 export const AppmenuLabel = GObject.registerClass(
   class UniteAppmenuLabel extends PanelMenu.Button {
     _init(text) {
       super._init(0.0, null, true)
 
+      const bin = new St.Bin({ name: 'appMenu' })
+      this.add_actor(bin)
+
+      this.bind_property('reactive', this, 'can-focus', 0)
+      this.reactive = false
+
+      this._container = new St.BoxLayout({ style_class: 'panel-status-menu-box' })
+      bin.set_child(this._container)
+
+      this._label = new St.Label({ y_align: Clutter.ActorAlign.CENTER })
+      this._container.add_actor(this._label)
+
+      this._spinner = new Animation.Spinner(16, { animate: true, hideOnStop: true })
+      this._container.add_actor(this._spinner)
+
       const menu = new AppMenu(this)
       this.setMenu(menu)
 
       this._menuManager = Main.panel.menuManager
       this._menuManager.addMenu(menu)
 
-      this._label = new St.Label({ y_align: Clutter.ActorAlign.CENTER })
-      this.add_actor(this._label)
-
-      this.reactive = false
-      this.label_actor = this._label
-
       this.setText(text || '')
       this.add_style_class_name('app-menu-label')
     }
 
     setApp(app) {
-      this.setText(app ? app.get_name() : '')
+      this.setText(app.get_name())
       this.menu.setApp(app)
     }
 
@@ -42,6 +52,14 @@ export const AppmenuLabel = GObject.registerClass(
     setVisible(visible) {
       this.container.visible = visible
     }
+
+    stopAnimation() {
+      this._spinner.stop()
+    }
+
+    startAnimation() {
+      this._spinner.play()
+    }
   }
 )
 

unite@hardpixel.eu/panel.js

@@ -134,9 +134,20 @@ class AppmenuButton extends Handlers.Feature {
     const visible = focused != null && !Main.overview.visibleTarget
     const loading = focused != null && (focused.get_state() == astates || focused.get_busy())
 
-    if (focused != this.focused) {
+    if (focused !== this.focused) {
+      this.focused?.disconnectObject(this)
       this.focused = focused
-      this.button.setApp(this.focused)
+
+      if (this.focused) {
+        this.focused.connectObject('notify::busy', this._syncState.bind(this), this)
+        this.button.setApp(this.focused)
+      }
+    }
+
+    if (loading) {
+      this.button.startAnimation()
+    } else {
+      this.button.stopAnimation()
     }
 
     this.button.setReactive(visible && !loading)

unite@hardpixel.eu/styles/shell/spacing.css

@@ -22,8 +22,7 @@
 
 #panel #panelActivities,
 #panel .system-tray-icons,
-#panel .desktop-name-label,
-#panel .app-menu-label {
+#panel .desktop-name-label {
   -natural-hpadding: 10px;
   -minimum-hpadding: 8px;
 }