fix(theme_mono): eliminate layout shift, fix spinner styling (#10216)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

src/themes/mono/lv_theme_mono.c

@@ -26,13 +26,28 @@ typedef struct _my_theme_t my_theme_t;
 #define COLOR_FG      dark_bg ? lv_color_white() : lv_color_black()
 #define COLOR_BG      dark_bg ? lv_color_black() : lv_color_white()
 
+#define SPINNER_WIDTH    8
+
 #define BORDER_W_NORMAL  1
 #define BORDER_W_PR      3
 #define BORDER_W_DIS     0
 #define BORDER_W_FOCUS   1
 #define BORDER_W_EDIT    2
+#define BORDER_W_MAX     3
+
 #define PAD_DEF          4
 
+/* when using border width changes to provided feedback, adjust
+ * the padding as well to prevent layout shift. All widths must be <= PAD_DEF */
+
+#define EXPAND_BORDER(style, state)  \
+    do { \
+        lv_style_set_border_width(&(style), BORDER_W_ ## state); \
+        lv_style_set_pad_all(&(style), PAD_DEF + BORDER_W_NORMAL - BORDER_W_ ## state); \
+    } while(0)
+
+
+
 /**********************
  *      TYPEDEFS
  **********************/
@@ -52,6 +67,9 @@ typedef struct {
     lv_style_t large_border;
     lv_style_t large_line_space;
     lv_style_t underline;
+#if LV_USE_SPINNER
+    lv_style_t spinner_indic;
+#endif
 #if LV_USE_TEXTAREA
     lv_style_t ta_cursor;
 #endif
@@ -116,7 +134,7 @@ static void style_init(my_theme_t * theme, bool dark_bg, const lv_font_t * font)
     lv_style_set_anim_duration(&theme->styles.card, 300);
 
     style_init_reset(&theme->styles.pr);
-    lv_style_set_border_width(&theme->styles.pr, BORDER_W_PR);
+    EXPAND_BORDER(theme->styles.pr, PR);
 
     style_init_reset(&theme->styles.inv);
     lv_style_set_bg_opa(&theme->styles.inv, LV_OPA_COVER);
@@ -128,7 +146,7 @@ static void style_init(my_theme_t * theme, bool dark_bg, const lv_font_t * font)
     lv_style_set_outline_color(&theme->styles.inv, COLOR_BG);
 
     style_init_reset(&theme->styles.disabled);
-    lv_style_set_border_width(&theme->styles.disabled, BORDER_W_DIS);
+    EXPAND_BORDER(theme->styles.disabled, DIS);
 
     style_init_reset(&theme->styles.focus);
     lv_style_set_outline_width(&theme->styles.focus, 1);
@@ -159,6 +177,13 @@ static void style_init(my_theme_t * theme, bool dark_bg, const lv_font_t * font)
     style_init_reset(&theme->styles.underline);
     lv_style_set_text_decor(&theme->styles.underline, LV_TEXT_DECOR_UNDERLINE);
 
+#if LV_USE_SPINNER
+    style_init_reset(&theme->styles.spinner_indic);
+    lv_style_set_arc_color(&theme->styles.spinner_indic, COLOR_FG);
+    lv_style_set_arc_width(&theme->styles.spinner_indic, SPINNER_WIDTH);
+    lv_style_set_arc_rounded(&theme->styles.spinner_indic, true);
+#endif
+
 #if LV_USE_TEXTAREA
     style_init_reset(&theme->styles.ta_cursor);
     lv_style_set_border_side(&theme->styles.ta_cursor, LV_BORDER_SIDE_LEFT);
@@ -462,6 +487,12 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
     }
 #endif
 
+#if LV_USE_SPINNER
+    else if(lv_obj_check_type(obj, &lv_spinner_class)) {
+        lv_obj_add_style(obj, &theme->styles.spinner_indic, LV_PART_INDICATOR);
+    }
+#endif
+
 #if LV_USE_TEXTAREA
     else if(lv_obj_check_type(obj, &lv_textarea_class)) {
         lv_obj_add_style(obj, &theme->styles.card, 0);