✨ feat: Add skeleton loading animation to SelectableButtonGroup component (#1365)

Add comprehensive loading state support with skeleton animations for the SelectableButtonGroup component, improving user experience during data loading.

Key Changes:
- Add loading prop to SelectableButtonGroup with minimum 500ms display duration
- Implement skeleton buttons with proper Semi-UI Skeleton wrapper and active animation
- Use fixed skeleton count (6 items) to prevent visual jumping during load transitions
- Pass loading state through all pricing filter components hierarchy:
  - PricingSidebar and PricingFilterModal as container components
  - PricingDisplaySettings, PricingCategories, PricingGroups, PricingQuotaTypes as filter components

Technical Details:
- Reference CardTable.js implementation for consistent skeleton UI patterns
- Add useEffect hook for 500ms minimum loading duration control
- Support both checkbox and regular button skeleton modes
- Maintain responsive layout compatibility (mobile/desktop)
- Add proper JSDoc parameter documentation for loading prop

Fixes:
- Prevent skeleton count sudden changes that caused visual discontinuity
- Ensure proper skeleton animation with Semi-UI active parameter
- Maintain consistent loading experience across all filter components

web/src/components/table/model-pricing/PricingSidebar.jsx

@@ -38,6 +38,7 @@ const PricingSidebar = ({
   setFilterGroup,
   filterQuotaType,
   setFilterQuotaType,
+  loading,
   t,
   ...categoryProps
 }) => {
@@ -77,14 +78,15 @@ const PricingSidebar = ({
         setCurrency={setCurrency}
         showRatio={showRatio}
         setShowRatio={setShowRatio}
+        loading={loading}
         t={t}
       />
 
-      <PricingCategories {...categoryProps} setActiveKey={setActiveKey} t={t} />
+      <PricingCategories {...categoryProps} setActiveKey={setActiveKey} loading={loading} t={t} />
 
-      <PricingGroups filterGroup={filterGroup} setFilterGroup={setFilterGroup} usableGroup={categoryProps.usableGroup} models={categoryProps.models} t={t} />
+      <PricingGroups filterGroup={filterGroup} setFilterGroup={setFilterGroup} usableGroup={categoryProps.usableGroup} models={categoryProps.models} loading={loading} t={t} />
 
-      <PricingQuotaTypes filterQuotaType={filterQuotaType} setFilterQuotaType={setFilterQuotaType} models={categoryProps.models} t={t} />
+      <PricingQuotaTypes filterQuotaType={filterQuotaType} setFilterQuotaType={setFilterQuotaType} models={categoryProps.models} loading={loading} t={t} />
     </div>
   );
 };

web/src/components/table/model-pricing/filter/PricingCategories.jsx

@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
 
-const PricingCategories = ({ activeKey, setActiveKey, modelCategories, categoryCounts, availableCategories, t }) => {
+const PricingCategories = ({ activeKey, setActiveKey, modelCategories, categoryCounts, availableCategories, loading = false, t }) => {
   const items = Object.entries(modelCategories)
     .filter(([key]) => availableCategories.includes(key))
     .map(([key, category]) => ({
@@ -36,6 +36,7 @@ const PricingCategories = ({ activeKey, setActiveKey, modelCategories, categoryC
       items={items}
       activeValue={activeKey}
       onChange={setActiveKey}
+      loading={loading}
       t={t}
     />
   );

web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx

@@ -29,6 +29,7 @@ const PricingDisplaySettings = ({
   setCurrency,
   showRatio,
   setShowRatio,
+  loading = false,
   t
 }) => {
   const items = [
@@ -81,6 +82,7 @@ const PricingDisplaySettings = ({
         onChange={handleChange}
         withCheckbox
         collapsible={false}
+        loading={loading}
         t={t}
       />
 
@@ -91,6 +93,7 @@ const PricingDisplaySettings = ({
           activeValue={currency}
           onChange={setCurrency}
           collapsible={false}
+          loading={loading}
           t={t}
         />
       )}

web/src/components/table/model-pricing/filter/PricingGroups.jsx

@@ -25,9 +25,11 @@ import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
  * @param {string} filterGroup 当前选中的分组，'all' 表示不过滤
  * @param {Function} setFilterGroup 设置选中分组
  * @param {Record<string, any>} usableGroup 后端返回的可用分组对象
+ * @param {Array} models 模型列表
+ * @param {boolean} loading 是否加载中
  * @param {Function} t i18n
  */
-const PricingGroups = ({ filterGroup, setFilterGroup, usableGroup = {}, models = [], t }) => {
+const PricingGroups = ({ filterGroup, setFilterGroup, usableGroup = {}, models = [], loading = false, t }) => {
   const groups = ['all', ...Object.keys(usableGroup)];
 
   const items = groups.map((g) => {
@@ -50,6 +52,7 @@ const PricingGroups = ({ filterGroup, setFilterGroup, usableGroup = {}, models =
       items={items}
       activeValue={filterGroup}
       onChange={setFilterGroup}
+      loading={loading}
       t={t}
     />
   );

web/src/components/table/model-pricing/filter/PricingQuotaTypes.jsx

@@ -24,9 +24,11 @@ import SelectableButtonGroup from '../../../common/ui/SelectableButtonGroup';
  * 计费类型筛选组件
  * @param {string|'all'|0|1} filterQuotaType 当前值
  * @param {Function} setFilterQuotaType setter
+ * @param {Array} models 模型列表
+ * @param {boolean} loading 是否加载中
  * @param {Function} t i18n
  */
-const PricingQuotaTypes = ({ filterQuotaType, setFilterQuotaType, models = [], t }) => {
+const PricingQuotaTypes = ({ filterQuotaType, setFilterQuotaType, models = [], loading = false, t }) => {
   const qtyCount = (type) => models.filter(m => type === 'all' ? true : m.quota_type === type).length;
 
   const items = [
@@ -41,6 +43,7 @@ const PricingQuotaTypes = ({ filterQuotaType, setFilterQuotaType, models = [], t
       items={items}
       activeValue={filterQuotaType}
       onChange={setFilterQuotaType}
+      loading={loading}
       t={t}
     />
   );

web/src/components/table/model-pricing/modal/PricingFilterModal.jsx

@@ -44,6 +44,7 @@ const PricingFilterModal = ({
     setFilterGroup,
     filterQuotaType,
     setFilterQuotaType,
+    loading,
     ...categoryProps
   } = sidebarProps;
 
@@ -105,16 +106,18 @@ const PricingFilterModal = ({
           setCurrency={setCurrency}
           showRatio={showRatio}
           setShowRatio={setShowRatio}
+          loading={loading}
           t={t}
         />
 
-        <PricingCategories {...categoryProps} setActiveKey={setActiveKey} t={t} />
+        <PricingCategories {...categoryProps} setActiveKey={setActiveKey} loading={loading} t={t} />
 
         <PricingGroups
           filterGroup={filterGroup}
           setFilterGroup={setFilterGroup}
           usableGroup={categoryProps.usableGroup}
           models={categoryProps.models}
+          loading={loading}
           t={t}
         />
 
@@ -122,6 +125,7 @@ const PricingFilterModal = ({
           filterQuotaType={filterQuotaType}
           setFilterQuotaType={setFilterQuotaType}
           models={categoryProps.models}
+          loading={loading}
           t={t}
         />
       </div>