feat(ui): added basic page state layer

ui/components/page_state_layer.slint

@@ -0,0 +1,112 @@
+import { LoadingAnimation } from "animation.slint";
+import { Token } from "../global.slint";
+
+/**
+ * this component ALWAYS appears on top of other elements at the same level.
+ * when no state specific, component will invisible.
+ * @property background: for hide other visible components
+ * 
+ * states:
+ * - loading state will show loading animate and a message.
+ *      @property is-loading: loading state
+ * 
+ * - error state will show a message and a retry button.
+ *      @property is-error: error state
+ *      @property error-message: show when in error state
+ *      @callback error-retry: invoke when retry button clicked
+ * 
+ * state priority (descending):
+ * - error
+ * - loading
+ */
+export component PageStateLayer {
+    // option
+    in property <color> background: Token.color.surface;
+    in property <bool> is-loading;
+    in property <bool> is-error;
+    in property <string> error-message: "Unknown error";
+    callback error-retry();
+    // implement
+    private property <color> on-surface: Token.color.on-surface;
+    width: 100%;
+    height: 100%;
+    z: 100;
+    visible: false;
+    _background := Rectangle {
+        background: background;
+    }
+
+    // loading layer
+    private property <bool> show-loading-layer;
+    if show-loading-layer: _loading-layer := VerticalLayout {
+        alignment: center;
+        HorizontalLayout {
+            height: self.preferred-height;
+            alignment: center;
+            spacing: 8px;
+            LoadingAnimation {
+                width: 24px;
+                height: 24px;
+                stroke: on-surface;
+            }
+
+            Text {
+                text: "加载中 ...";
+                font-size: Token.font.body.large.size;
+                font-weight: Token.font.body.large.weight;
+                color: on-surface;
+            }
+        }
+    }
+    // error layer
+    private property <bool> show-error-layer;
+    if show-error-layer: _error-layer := VerticalLayout {
+        alignment: center;
+        HorizontalLayout {
+            alignment: center;
+            spacing: 8px;
+            Image {
+                width: 24px;
+                height: 24px;
+                source: Token.image.icon.error;
+                colorize: Token.color.error;
+            }
+
+            Text {
+                text: error-message;
+                font-size: Token.font.body.large.size;
+                font-weight: Token.font.body.large.weight;
+                color: Token.color.error;
+            }
+        }
+
+        // TODO: await button refactor
+        // Button {
+        //     type: ;
+        //     clicked => {
+        //         root.error-retry();
+        //     }
+        // }
+    }
+    states [
+        error when is-error: {
+            visible: true;
+            show-error-layer: true;
+        }
+        loading when is-loading: {
+            visible: true;
+            show-loading-layer: true;
+        }
+    ]
+}
+
+component Test {
+    PageStateLayer {
+        is-loading: true;
+        // is-error: true;
+    }
+
+    Rectangle {
+        background: red;
+    }
+}