shadcn-ui-expansions项目中Loading Button组件尺寸问题的解决方案

问题背景

在使用shadcn-ui-expansions项目中的Loading Button组件时，开发者发现当按钮处于加载状态时，预设的尺寸(size)属性没有被正确应用。这个问题尤其在使用variant="link"变体时更为明显。

问题分析

通过查看组件源码，发现Loading Button的实现方式存在以下关键点：

1. 组件使用了cn函数来合并className，其中包含了buttonVariants函数生成的类名
2. 加载状态通过loading属性控制，当loading为true时会显示Loader2旋转图标
3. 子内容(children)和加载图标使用了React片段(<>...</>)包裹

这种实现方式可能导致尺寸类名没有被正确传递给内部元素，特别是在使用link变体时，因为link变体通常不包含明显的视觉尺寸指示。

解决方案

项目维护者提出了使用Slottable组件的改进方案：

1. 将内部内容包裹在Slottable组件中
2. 根据loading状态分别处理两种场景：
   • 加载状态：同时显示加载图标和子内容
   • 非加载状态：仅显示子内容

这种改进确保了尺寸类名能够正确传递给所有内部元素，包括加载图标和子内容。

验证方法

为了验证尺寸是否被正确应用，维护者建议：

1. 为按钮添加border类名来可视化尺寸变化
2. 测试不同变体(variant)下的表现，特别是link变体
3. 观察加载图标和文本内容的间距是否符合预期

技术要点

1. Slottable组件的作用是确保父组件传递的属性能够正确应用到子元素
2. cn函数用于智能合并类名，避免冲突
3. 尺寸类名通过buttonVariants函数生成，包含高度、内边距等样式
4. 加载图标的mr-2类名确保了与子内容的适当间距

最佳实践

在使用Loading Button组件时，建议：

1. 明确指定size属性，即使使用默认尺寸
2. 对于link变体，添加视觉辅助(如border)来验证尺寸
3. 考虑加载状态下的布局变化，确保UI一致性
4. 测试不同尺寸下的加载图标与文本的间距

这个解决方案展示了如何通过合理的组件封装和属性传递机制，确保UI组件在各种状态下都能保持一致的视觉表现。