docs: add usage recommendations for ms.AutoLoading to the docs

Author: Col0ring

.changeset/metal-hornets-wink.md

@@ -0,0 +1,5 @@
+---
+'modelscope_studio': patch
+---
+
+docs: add usage recommendations for `ms.AutoLoading` to the docs

README-zh_CN.md

@@ -48,9 +48,8 @@ import modelscope_studio.components.antd as antd
 import modelscope_studio.components.base as ms
 
 with gr.Blocks() as demo:
-    with ms.Application():
-        with antd.ConfigProvider():
-            antd.DatePicker()
+    with ms.Application(), antd.ConfigProvider(), ms.AutoLoading():
+        antd.DatePicker()
 
 demo.queue().launch()
 ```

README.md

@@ -48,9 +48,8 @@ import modelscope_studio.components.antd as antd
 import modelscope_studio.components.base as ms
 
 with gr.Blocks() as demo:
-    with ms.Application():
-        with antd.ConfigProvider():
-            antd.DatePicker()
+    with ms.Application(), antd.ConfigProvider(), ms.AutoLoading():
+        antd.DatePicker()
 
 demo.queue().launch()
 ```

docs/components/antd/overview/README-zh_CN.md

@@ -10,10 +10,11 @@ import modelscope_studio.components.antd as antd
 
 <demo name="quick_start"></demo>
 
-注意：其中`ms.Application`与`antd.ConfigProvider`是必须的。
+注意：其中`ms.Application`与`antd.ConfigProvider`是必须的,`ms.AutoLoading`为可选。。
 
 - `Application` 包含了`modelscope_studio`中所有的组件依赖，请确保`modelscope_studio`所有导出的组件都被其包裹，否则页面将会无法成功预览。
 - `ConfigProvider` 与 Ant Design 中的功能一致，除此之外，我们还加了一些额外的适配来兼容 Gradio 的样式。因此，为了保证页面样式正常，所有的`antd`组件需要包裹在该组件下。
+- `AutoLoading`会在`Gradio`前端发送请求时自动为被包裹的内容添加加载动画。该组件会自动收集子组件的加载状态，建议至少在全局使用一次此组件，以显示兜底的加载反馈。
 
 ## 属性限制
 

docs/components/antd/overview/README.md

@@ -10,10 +10,11 @@ import modelscope_studio.components.antd as antd
 
 <demo name="quick_start"></demo>
 
-Note: Both `ms.Application` and `antd.ConfigProvider` are required.
+Note: Both `ms.Application` and `antd.ConfigProvider` are required, `ms.AutoLoading` is optional.
 
 - `Application` contains all component dependencies in `modelscope_studio`. Please ensure that all components exported from `modelscope_studio` are wrapped by it, otherwise the page will not be successfully previewed.
 - `ConfigProvider` functions the same as in Ant Design. Additionally, we have added some extra adaptations to be compatible with Gradio's styles. Therefore, to ensure normal page styling, all `antd` components need to be wrapped within this component.
+- `AutoLoading` will automatically add loading animations to the wrapped content when requests are sent from the `Gradio` frontend. This component will automatically collect the loading states of child components, it's recommended to use this component at least once globally to provide fallback loading feedback.
 
 ## Property Limitations
 

docs/components/antd/overview/demos/quick_start.py

@@ -5,7 +5,8 @@
 with gr.Blocks() as demo:
     with ms.Application():
         with antd.ConfigProvider():
-            antd.Button("Hello Ant Design", type="primary")
+            with ms.AutoLoading():
+                antd.Button("Hello Ant Design", type="primary")
 
 if __name__ == "__main__":
     demo.queue().launch()

docs/components/antdx/overview/README-zh_CN.md

@@ -10,10 +10,11 @@ import modelscope_studio.components.antdx as antdx
 
 <demo name="quick_start"></demo>
 
-注意：其中`ms.Application`与`antdx.XProvider`（或者`antd.ConfigProvider`）是必须的。
+注意：其中`ms.Application`与`antdx.XProvider`（或者`antd.ConfigProvider`）是必须的，`ms.AutoLoading`为可选。
 
 - `Application` 包含了`modelscope_studio`中所有的组件依赖，请确保`modelscope_studio`所有导出的组件都被其包裹，否则页面将会无法成功预览。
 - `XProvider`（`ConfigProvider`） 与 Ant Design X（Ant Design）中的功能一致，除此之外，我们还加了一些额外的适配来兼容 Gradio 的样式。因此，为了保证页面样式正常，所有的`antdx`组件需要包裹在该组件下。
+- `AutoLoading`会在`Gradio`前端发送请求时自动为被包裹的内容添加加载动画。该组件会自动收集子组件的加载状态，建议至少在全局使用一次此组件，以显示兜底的加载反馈。
 
 ## 其他
 

docs/components/antdx/overview/README.md

@@ -10,10 +10,11 @@ import modelscope_studio.components.antdx as antdx
 
 <demo name="quick_start"></demo>
 
-Note: Both `ms.Application` and `antdx.XProvider`(or `antd.ConfigProvider`) are required.
+Note: Both `ms.Application` and `antd.ConfigProvider` are required, `ms.AutoLoading` is optional.
 
 - `Application` contains all component dependencies in `modelscope_studio`. Please ensure that all components exported from `modelscope_studio` are wrapped by it, otherwise the page will not be successfully previewed.
 - `XProvider`(`ConfigProvider`) functions the same as in Ant Design X(Ant Design). Additionally, we have added some extra adaptations to be compatible with Gradio's styles. Therefore, to ensure normal page styling, all `antdx` components need to be wrapped within this component.
+- `AutoLoading` will automatically add loading animations to the wrapped content when requests are sent from the `Gradio` frontend. This component will automatically collect the loading states of child components, it's recommended to use this component at least once globally to provide fallback loading feedback.
 
 ## Others
 

docs/components/antdx/overview/demos/quick_start.py

@@ -5,13 +5,14 @@
 with gr.Blocks() as demo:
     with ms.Application():
         with antdx.XProvider():  # or antd.ConfigProvider
-            antdx.Welcome(
-                icon=
-                "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp",
-                title="Hello, I'm Ant Design X",
-                description=
-                "Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
-            )
+            with ms.AutoLoading():
+                antdx.Welcome(
+                    icon=
+                    "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp",
+                    title="Hello, I'm Ant Design X",
+                    description=
+                    "Base on Ant Design, AGI product interface solution, create a better intelligent vision~"
+                )
 
 if __name__ == "__main__":
     demo.queue().launch()

docs/demos/example.py

@@ -3,9 +3,8 @@
 import modelscope_studio.components.base as ms
 
 with gr.Blocks() as demo:
-    with ms.Application():
-        with antd.ConfigProvider():
-            antd.DatePicker()
+    with ms.Application(), antd.ConfigProvider(), ms.AutoLoading():
+        antd.DatePicker()
 
 if __name__ == "__main__":
     demo.queue().launch()