Add connection status indicator

gui/ui/app.slint

@@ -7,11 +7,11 @@ import {
     CheckBox,
     ScrollView,
     GridBox,
-    Palette,
+    Palette, Spinner, SpinBox,
 } from "std-widgets.slint";
 import { SettingsView } from "settings.slint";
-import { State, SItem } from "state.slint";
-export { State, SItem }
+import { ConnectionStatus, State, SItem } from "state.slint";
+export { ConnectionStatus, State, SItem }
 
 
 component GoodListItem inherits Rectangle {
@@ -201,7 +201,30 @@ component GoodButtons inherits ScrollView {
     }
 }
 
+component ConnStatusIndicator inherits Rectangle {
+    width: 18px;
+    Image {
+        states [
+            idle when State.connection-status == ConnectionStatus.Idle: {
+                opacity: 0%;
+            }
+            syncing when State.connection-status == ConnectionStatus.Syncing: {
+                colorize: green;
+                opacity: 75% + 25% * sin(360deg * animation-tick() / 1s);
+            }
+            error when State.connection-status == ConnectionStatus.Error: {
+                colorize: red;
+                opacity: 100%;
+            }
+        ]
+        source: @image-url("../images/arrow-down-up.svg");
+        width: 24px;
+        height: self.width;
+    }
+}
+
 component RefreshButton inherits HorizontalLayout {
+        spacing: 8px;
     alignment: center;
     Button {
         text: "Refresh";
@@ -210,6 +233,7 @@ component RefreshButton inherits HorizontalLayout {
             State.refresh-list();
         }
     }
+    ConnStatusIndicator { }
 }
 
 component AddView inherits VerticalLayout {
@@ -218,7 +242,7 @@ component AddView inherits VerticalLayout {
     padding: 8px;
     spacing: 8px;
 
-    RefreshButton { }
+    RefreshButton {}
 
     goods := GoodsListAdd {
         items <=> list;

gui/ui/state.slint

@@ -4,6 +4,12 @@ export struct SItem {
     amount: int,
 }
 
+export enum ConnectionStatus {
+    Idle,
+    Syncing,
+    Error,
+}
+
 export global State {
     in-out property <[SItem]> list: [
         { name: "Test 1", checked: true },
@@ -21,4 +27,5 @@ export global State {
     set-server-address(address) => {
         server-address = address;
     }
+    in-out property <ConnectionStatus> connection-status: ConnectionStatus.Syncing;
 }