canopy-skeleton

Apply Canopy skeleton loading directives to Angular components during data fetch.

23|46|Updated Sep 7, 2020
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-skeleton
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canopy-skeleton
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/skeleton
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-skeleton

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Best practices to implement Canopy's skeleton loading to improve perceived performance and consistency across UI components.

Core Features & Use Cases

  • Standardized placeholders for varied content to maintain layout during data fetch.
  • Guidance for directive usage to ensure correct application across composite and projected content.
  • Real-world scenarios where skeletons improve user perception during network latency.

Quick Start

Apply the Canopy skeleton loading directive to a component that renders dynamic content to show a loading placeholder until data is available.

Frequently Asked Questions about canopy-skeleton

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

FAQPage Schema
How do I implement skeleton loading in Angular to improve perceived performance?

Skeleton loading in Angular improves perceived performance by applying a directive to components, displaying standardized placeholders during data fetches until dynamic content is ready to render.

What are the best practices for structuring skeleton placeholders in Canopy UI components?

Best practices for Canopy skeleton placeholders involve using standardized layouts that maintain structural fidelity during asynchronous rendering, ensuring correct directive usage across composite and projected content scenarios.

When should I use skeleton loading directives for projected content in Angular?

Use skeleton loading directives for projected content in Angular when you need to wrap asynchronous components, ensuring placeholders maintain layout fidelity and visual consistency during network latency.

Does Canopy skeleton loading work with composite views in Angular applications?

Yes, Canopy skeleton loading works with composite views in Angular applications by providing directive guidance to correctly apply placeholders across complex component structures during data fetches.

Why does my Angular layout shift when using skeleton loading placeholders?

Angular layout shifts occur when skeleton loading placeholders lack structural fidelity, which Canopy solves by wrapping projected content with standardized placeholders that match the dimensions of the fetched data.

Can I use skeleton loading to handle network latency in Angular UI components?

Yes, you can use skeleton loading to handle network latency in Angular UI components by displaying standardized placeholders that improve user perception while waiting for asynchronous data to load.