codebuddy能基于react query、swr等请求方案自动注入语义匹配的加载状态逻辑，支持骨架屏绑定、错误重试、自定义hook状态补全及批量cli修正，提升开发效率与一致性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在React项目中为数据请求添加加载状态时，常因手动编写loading逻辑导致条件渲染分支混乱、状态遗漏或与请求库生命周期脱节。CodeBuddy能基于项目实际使用的请求方案（如React Query、SWR、Axios）自动注入语义匹配的加载控制代码，避免重复劳动和逻辑错位。
用自然语言指令一键集成加载状态
这一步适合刚完成接口调用逻辑、尚未添加任何loading处理的场景。CodeBuddy会扫描当前组件内已存在的请求Hook调用，识别其返回结构并插入配套状态判断。
1、确保光标位于目标React组件文件（如HomePage.tsx）内部，且该组件中已存在类似useQuery、useSWR或自定义请求Hook的调用。
2、在编辑器空白行输入指令：“为当前页面的用户列表请求添加加载状态，使用骨架屏占位，失败时显示重试按钮”。
3、按下Ctrl+Enter（VS Code）或点击侧边栏“生成加载逻辑”按钮，CodeBuddy将自动定位useQuery调用点，并在JSX中插入{isInitialLoading && <skeletonlist></skeletonlist>}、{error && <retrybutton onretry="{refetch}"></retrybutton>}等区块。
【必须确保useQuery返回对象包含isInitialLoading字段】若项目使用的是旧版React Query v3，需先升级至v5或手动启用structuralSharing: false配置，否则状态字段名不匹配会导致插入失败。
从现有请求Hook反向注入状态控制
当已有封装好的自定义Hook（如useUserProfile）但未暴露loading状态时，CodeBuddy可解析其返回值结构，补全缺失的状态字段声明与导出逻辑。
方法一：右键提取式注入
1、在VS Code中打开src/hooks/useUserProfile.ts文件。
2、右键点击函数体外层export语句 → 选择“CodeBuddy: 注入加载状态支持”。
3、系统自动分析return语句中的{ data, error }结构，在返回对象中追加isLoading: boolean字段，并同步更新Hook内部useEffect依赖与setState调用。
方法二：CLI批量修正
1、终端进入项目根目录，执行：codebuddy inject loading --hook useUserProfile --target src/hooks/
2、CodeBuddy读取tsconfig.json与package.json，确认项目使用React Query后，生成兼容v5的loading推导逻辑。
3、检查生成的diff提示，确认新增的isLoading是否覆盖了初始加载、轮询中、refetching三种场景——若仅标记为isFetching，需在指令末尾追加“要求区分initialLoading与refetching”再运行一次。
绑定骨架屏组件到加载流程
骨架屏不能只靠CSS动画堆砌，必须与真实DOM结构节奏一致，否则视觉跳变明显。CodeBuddy会根据你正在开发的页面组件，生成尺寸、层级、响应式断点完全对齐的占位结构。
第一步：在组件文件顶部空白处输入：“为HomePage组件生成骨架屏，并绑定到useHomePageQuery的loading状态”。
第二步：触发生成后，CodeBuddy创建src/components/SkeletonHomePage.tsx，其中每个div的className都复用原组件对应区域的Tailwind类名（如grid-cols-3→grid-cols-3 animate-pulse）。
第三步：自动修改HomePage.tsx，将原有{data && <content></content>}替换为{isInitialLoading ? <skeletonhomepage></skeletonhomepage> : data && <content></content>}，并确保SkeletonHomePage被正确导入。
第四步：检查生成的骨架组件是否包含aria-hidden="true"属性——缺失会导致屏幕阅读器误读占位元素，必须手动补上。
