Adding style guide notes.

Author: PoojaB26

docs/ff-concepts/design-system/design-system.md

@@ -198,9 +198,9 @@ If you prefer watching a video tutorial, here is the guide for you:
 
 ---
 
-## Loading Indicator
+## Loading Indicators
 
-To customize the loading indicators used in the app, you can make changes in this section. You have the option to specify the **Indicator Type**, **Color**, and **Radius**, and the preview of the changes will be displayed below.
+To customize the **Loading Indicators** used in the app, you can make changes in this section. You have the option to specify the **Indicator Type**, **Color**, and **Radius**, and the preview of the changes will be displayed below.
 
 <div style={{
     position: 'relative',
@@ -228,6 +228,10 @@ To customize the loading indicators used in the app, you can make changes in thi
 </div>
 <p></p>
 
+:::tip
+Avoid mis-sized loading indicators or components, which lead to jumping layouts. Ensure loading components match the size and position of the content they replace.
+:::
+
 If you prefer watching a video tutorial, here is the guide for you:
 
 <div style={{

docs/resources/ui/widgets/composing-widgets/list-grid.md

@@ -29,6 +29,10 @@ Axis sets the orientation of the ListView. You can select either "Vertical" or
 - **Items Spacing:** This defines the space between individual items in the ListView. You can
   specify the spacing in pixels.
 
+:::tip[Items Spacing vs Padding]
+Prefer “Items Spacing” set on the parent row or column instead of padding on individual elements. This ensures consistency, especially on non-dynamically generated lists.
+:::
+
 - **Apply to Start & End:** When enabled, the item spacing will also be applied to the start and the
   end of the ListView, adding a margin at the beginning and end of the list. This effectively adds padding at the start and end of the layout in addition to between the items.
 

docs/resources/ui/widgets/composing-widgets/rows-column-stack.md

@@ -222,6 +222,10 @@ incoming constraints and the scrolling movement, effectively managing overflow b
   Column. You can specify a static numerical value that determines the pixel spacing between 
   adjacent children or set it from a variable.
 
+:::tip[Items Spacing vs Padding]
+Prefer “Items Spacing” set on the parent row or column instead of padding on individual elements. This ensures consistency, especially on non-dynamically generated lists.
+:::
+
 - **Apply to Start & End:** When toggled on, this applies the specified item spacing to the 
   beginning and the end of the Row or Column. This effectively adds padding at the start and end of the layout in addition to between the items.