[gnome-characters/bilelmoussaoui/gtk4: 64/76] window: cleanup loading screen UI

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit d771ced269007a4b56f01ddaea38ef759f913f88
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Wed Nov 24 21:54:50 2021 +0100

    window: cleanup loading screen UI

 data/window.ui | 13 ++++++-------
 src/window.js  |  4 +++-
 2 files changed, 9 insertions(+), 8 deletions(-)
---
diff --git a/data/window.ui b/data/window.ui
index 08932e9..7465b5f 100644
--- a/data/window.ui
+++ b/data/window.ui
@@ -170,23 +170,22 @@
                   <object class="GtkStackPage">
                     <property name="name">loading</property>
                     <property name="child">
-                      <object class="GtkGrid" id="loading-grid">
+                      <object class="GtkBox">
+                        <property name="orientation">vertical</property>
                         <property name="halign">center</property>
                         <property name="valign">center</property>
-                        <style>
-                          <class name="banner"/>
-                        </style>
                         <child>
-                          <object class="GtkSpinner" id="loading-spinner">
+                          <object class="GtkSpinner" id="loadingSpinner">
                             <property name="width-request">128</property>
                             <property name="height-request">128</property>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkLabel" id="loading-label">
+                          <object class="GtkLabel">
                             <property name="label" translatable="yes">Loading…</property>
                             <style>
-                              <class name="banner-label"/>
+                              <class name="title"/>
+                              <class name="large-title"/>
                             </style>
                           </object>
                         </child>
diff --git a/src/window.js b/src/window.js
index d17b808..ff2413f 100644
--- a/src/window.js
+++ b/src/window.js
@@ -38,7 +38,7 @@ var MainWindow = GObject.registerClass({
     InternalChildren: [
         'search-active-button',
         'search-bar', 'search-entry', 'back-button',
-        'container', 'sidebar',
+        'container', 'sidebar', 'loadingSpinner',
         'leaflet', 'mainStack', 'windowTitle',
         'charactersView', 'scrolledWindow',
     ],
@@ -122,8 +122,10 @@ var MainWindow = GObject.registerClass({
 
         this._charactersView.connect('notify::loading', view => {
             if (view.loading) {
+                this._loadingSpinner.start();
                 this._mainStack.visible_child_name = 'loading';
             } else {
+                this._loadingSpinner.stop();
                 this._mainStack.visible_child_name = 'character-list';
                 this._mainStack.queue_draw();
             }