ui/lvgl: add an optional spinner to card widget

some cards will need to show a nondeterministic progress.
the spinner in the top right corner does exactly that, controlled
via the new spin function.

the default is no spinner.

src/ui/bitcoin.zig

@@ -45,7 +45,7 @@ pub fn initTabPanel(cont: lvgl.Container) !void {
 
     // blockchain section
     {
-        const card = try lvgl.Card.new(parent, "BLOCKCHAIN");
+        const card = try lvgl.Card.new(parent, "BLOCKCHAIN", .{});
         const row = try lvgl.FlexLayout.new(card, .row, .{});
         row.setWidth(lvgl.sizePercent(100));
         row.setHeightToContent();
@@ -69,7 +69,7 @@ pub fn initTabPanel(cont: lvgl.Container) !void {
     }
     // balance section
     {
-        const card = try lvgl.Card.new(parent, "ON-CHAIN BALANCE");
+        const card = try lvgl.Card.new(parent, "ON-CHAIN BALANCE", .{});
         const row = try lvgl.FlexLayout.new(card, .row, .{});
         row.setWidth(lvgl.sizePercent(100));
         row.setHeightToContent();
@@ -93,7 +93,7 @@ pub fn initTabPanel(cont: lvgl.Container) !void {
     }
     // mempool section
     {
-        const card = try lvgl.Card.new(parent, "MEMPOOL");
+        const card = try lvgl.Card.new(parent, "MEMPOOL", .{});
         const row = try lvgl.FlexLayout.new(card, .row, .{});
         row.setWidth(lvgl.sizePercent(100));
         row.clearFlag(.scrollable);

src/ui/lightning.zig

@@ -39,7 +39,7 @@ pub fn initTabPanel(cont: lvgl.Container) !void {
 
     // info section
     {
-        const card = try lvgl.Card.new(parent, "INFO");
+        const card = try lvgl.Card.new(parent, "INFO", .{});
         const row = try lvgl.FlexLayout.new(card, .row, .{});
         row.setHeightToContent();
         row.setWidth(lvgl.sizePercent(100));
@@ -63,7 +63,7 @@ pub fn initTabPanel(cont: lvgl.Container) !void {
     }
     // balance section
     {
-        const card = try lvgl.Card.new(parent, "BALANCE");
+        const card = try lvgl.Card.new(parent, "BALANCE", .{});
         const row = try lvgl.FlexLayout.new(card, .row, .{});
         row.setWidth(lvgl.sizePercent(100));
         row.clearFlag(.scrollable);
@@ -89,7 +89,7 @@ pub fn initTabPanel(cont: lvgl.Container) !void {
     }
     // channels section
     {
-        const card = try lvgl.Card.new(parent, "CHANNELS");
+        const card = try lvgl.Card.new(parent, "CHANNELS", .{});
         tab.channels_cont = try lvgl.FlexLayout.new(card, .column, .{});
         tab.channels_cont.setHeightToContent();
         tab.channels_cont.setWidth(lvgl.sizePercent(100));

src/ui/lvgl.zig

@@ -623,17 +623,44 @@ pub const Window = struct {
 pub const Card = struct {
     lvobj: *LvObj,
     title: Label,
+    spinner: ?Spinner = null,
 
     pub usingnamespace BaseObjMethods;
     pub usingnamespace WidgetMethods;
 
-    pub fn new(parent: anytype, title: [*:0]const u8) !Card {
+    pub const Opt = struct {
+        /// embeds a spinner in the top-right corner; control with spin fn.
+        spinner: bool = false,
+    };
+
+    pub fn new(parent: anytype, title: [*:0]const u8, opt: Opt) !Card {
         const flex = (try Container.new(parent)).flex(.column, .{});
         flex.setHeightToContent();
         flex.setWidth(sizePercent(100));
-        const tl = try Label.new(flex, title, .{});
-        tl.addStyle(nm_style_title(), .{});
-        return .{ .lvobj = flex.lvobj, .title = tl };
+        var card: Card = .{ .lvobj = flex.lvobj, .title = undefined };
+
+        if (opt.spinner) {
+            const row = try FlexLayout.new(flex, .row, .{});
+            row.setWidth(sizePercent(100));
+            row.setHeightToContent();
+            card.title = try Label.new(row, title, .{});
+            card.title.flexGrow(1);
+            card.spinner = try Spinner.new(row);
+            card.spinner.?.flexGrow(0);
+            card.spin(.off);
+        } else {
+            card.title = try Label.new(flex, title, .{});
+        }
+        card.title.addStyle(nm_style_title(), .{});
+
+        return card;
+    }
+
+    pub fn spin(self: Card, onoff: enum { on, off }) void {
+        if (self.spinner) |p| switch (onoff) {
+            .on => p.show(),
+            .off => p.hide(),
+        };
     }
 };