Feature Request: Skeleton Component to Handle Loading States in Radzen #1745

New Issue

claunia · 2026-01-29T17:57:59Z

claunia commented

2026-01-29 17:57:59 +00:00

Originally created by @franklupo on GitHub (Apr 28, 2025).

Is your feature request related to a problem? Please describe.
Currently, Radzen does not offer a Skeleton component, which is commonly used in many UI frameworks to improve user experience by showing loading placeholders for content before the actual data is loaded.

Describe the solution you'd like
It would be great if Radzen could add a Skeleton component to their Blazor library. The Skeleton component should:

Shape Customization: Support different shapes such as circles, rectangles, and custom designs.
Animation Control: Allow developers to control animation speed, type (e.g., shimmer, fade), and direction.
Content Simulation: Enable displaying various types of content (e.g., images, text, buttons) within the skeleton.
Responsive Design: Ensure the skeleton adjusts according to different screen sizes and devices.

Describe alternatives you've considered
At the moment, developers need to create custom skeleton screens using CSS or third-party libraries, which can be time-consuming. Having a built-in solution within Radzen would greatly streamline the development process.

Additional context
Many UI libraries have implemented Skeleton components, and examples can be found here:

A Skeleton component in Radzen would improve the user experience by showing placeholders for content while data is loading, which is especially useful for dynamic and data-heavy applications.

Best regards

Originally created by @franklupo on GitHub (Apr 28, 2025). **Is your feature request related to a problem? Please describe.** Currently, Radzen does not offer a Skeleton component, which is commonly used in many UI frameworks to improve user experience by showing loading placeholders for content before the actual data is loaded. **Describe the solution you'd like** It would be great if Radzen could add a Skeleton component to their Blazor library. The Skeleton component should: - **Shape Customization**: Support different shapes such as circles, rectangles, and custom designs. - **Animation Control**: Allow developers to control animation speed, type (e.g., shimmer, fade), and direction. - **Content Simulation**: Enable displaying various types of content (e.g., images, text, buttons) within the skeleton. - **Responsive Design**: Ensure the skeleton adjusts according to different screen sizes and devices. **Describe alternatives you've considered** At the moment, developers need to create custom skeleton screens using CSS or third-party libraries, which can be time-consuming. Having a built-in solution within Radzen would greatly streamline the development process. **Additional context** Many UI libraries have implemented Skeleton components, and examples can be found here: - [MudBlazor Skeleton](https://mudblazor.com/components/skeleton) - [Syncfusion Skeleton](https://blazor.syncfusion.com/demos/skeleton/defaultfunctionalities?theme=fluent2) A Skeleton component in Radzen would improve the user experience by showing placeholders for content while data is loading, which is especially useful for dynamic and data-heavy applications. Best regards

claunia closed this issue

2026-01-29 17:57:59 +00:00

claunia commented

2026-01-29 17:58:00 +00:00

@xXBuilderBXx commented on GitHub (Jun 22, 2025):

I have my own custom component that works something like this.
It should be easy enough to implement in Radzen.

<span class="rz-skeleton" style="width: @(Width + "px"); height: @(Height + "px"); @Style"></span>

<style>
.rz-skeleton {
    border-radius: 4px;
    animation: rz-skeleton-keyframes-pulse 1.5s ease-in-out .5s infinite;
    background-color: rgba(0,0,0,.11);
    display: block;
    margin-bottom: 2px;
}

@-webkit-keyframes rz-skeleton-keyframes-pulse {
    0% {
        opacity: 1
    }

    50% {
        opacity: .4
    }

    100% {
        opacity: 1
    }
}
</style>

@code {
    [Parameter] public int Width { get; set; } = 120;
    [Parameter] public int Height { get; set; } = 20;
    [Parameter] public string? Style { get; set; }
}

@xXBuilderBXx commented on GitHub (Jun 22, 2025): I have my own custom component that works something like this. It should be easy enough to implement in Radzen. ```razor <span class="rz-skeleton" style="width: @(Width + "px"); height: @(Height + "px"); @Style"></span> <style> .rz-skeleton { border-radius: 4px; animation: rz-skeleton-keyframes-pulse 1.5s ease-in-out .5s infinite; background-color: rgba(0,0,0,.11); display: block; margin-bottom: 2px; } @-webkit-keyframes rz-skeleton-keyframes-pulse { 0% { opacity: 1 } 50% { opacity: .4 } 100% { opacity: 1 } } </style> @code { [Parameter] public int Width { get; set; } = 120; [Parameter] public int Height { get; set; } = 20; [Parameter] public string? Style { get; set; } } ``` ![Image](https://github.com/user-attachments/assets/f026d18c-9822-4cf5-a7cb-c3554e2e4460)

claunia commented

2026-01-29 17:58:00 +00:00

@akorchev commented on GitHub (Sep 3, 2025):

Done.

@akorchev commented on GitHub (Sep 3, 2025): [Done](https://blazor.radzen.com/skeleton?theme=material3).

claunia referenced this issue

2026-01-29 18:20:52 +00:00

[PR #1745] [MERGED] Render chart tooltips in the same way as standard tooltips #2878

claunia referenced this issue

2026-01-29 18:20:53 +00:00

[PR #1745] Render chart tooltips in the same way as standard tooltips #2881

Sign in to join this conversation.