cpn-basic-loading

Implement the UDesign Loading component in React projects.

1|Updated Apr 14, 2026
One-click install
npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-loading
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cpn-basic-loading
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-loading
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-loading

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

这项技能帮助 AI 正确使用 UDesign Loading 组件,避免常见配置错误并提供可复用的实现示例。

Core Features & Use Cases

  • 引入与封装: 指导如何在项目中引入 Loading 组件并嵌套在需要加载区域。
  • 基本用法: 展示 Loading 的最基本用法及不同 loading 状态的展示。
  • 设计约束与最佳实践: 提供全局规范、指示符自定义与取消加载的要点。

Quick Start

Generate a minimal React example wrapping content with the Loading component and demonstrate a basic loading state.

Frequently Asked Questions about cpn-basic-loading

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a loading indicator to a content area in a React project?

To add a loading indicator in React, wrap your target content area with the UDesign Loading component and toggle its loading state to show a spinner during data fetching or processing delays.

What is the correct import syntax for the UDesign Loading component?

The correct import syntax requires importing the Loading component directly from UDesign. This approach prohibits external libraries and ensures adherence to UDesign design guidelines for consistent visuals and accessibility.

Can I customize the loading indicator in my React UI?

Yes, you can customize the loading indicator in your React UI. The UDesign Loading component supports custom indicators, allowing you to replace the default spinner with your own animation or element for advanced usage scenarios.

Does the UDesign Loading component work with other UI libraries?

No, the UDesign Loading component prohibits the use of external libraries. It is designed to be used independently within React projects to ensure adherence to UDesign design guidelines and maintain visual consistency.

When should I use a loading component in a React application?

Use a loading component in a React application during asynchronous operations like data fetching or rendering delays. Wrapping content areas with the Loading component signals pending states to users, improving perceived performance and accessibility.