Hi Federico,

I am stepping in to provide an update. This issue has been fixed in version 5.9.0 of the Kendo themes. You may follow the update here. That said, I will mark the current item as "Completed".

The ThemeBuilder currently uses an older version of the themes, so the fix will not visible there at this stage. The ThemeBuilder will be updated with the new theme version in R1 2023.

Regards,
Nadezhda Tacheva
Progress Telerik

Hi Federico,

Thank you for following up with additional details! I am still unable to reproduce an issue in the live demos using the Fluent theme.

However, I tested generating a custom theme from the Themebuilder using the Fluent theme as a base and I did notice a problem - the selector for the animation style is indeed only the one with space:

.k-skeleton-pulse .k-skeleton ...

The correct approach is to include both selectors, so the theme can be compatible with the other Telerik suites. I updated the issue and informed our front-end team.

Last but not least, I'd like to also thank you for your report! As a small gesture of gratitude, I've added some Telerik points to your account.

Regards,
Nadezhda Tacheva
Progress Telerik

Hi Federico,

I am happy you managed to find a working solution for the time being.

I tested the scenario on my end, both locally and in the live demos. I will hereby share my observations:

Live demo test:

I browsed through all of the Skeleton demos and tested with different animation types (pulse and wave). However, it seems to be working correctly on my end.

Local sample test:

I generated a custom theme from the ThemeBuilder and added it to a sample app containing a Skeleton component to replicate your scenario.

As a result, the Skeleton animation did work as expected but I noticed the a discrepancy in the generated theme - it contains the following selectors and styles for the Skeleton animation:

.k-skeleton-pulse .k-skeleton, .k-skeleton-pulse.k-skeleton {
    -webkit-animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
    animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite
}

The Skeleton component essentially has both classes - .k-skeleton and .k-skeleton-animation_type. That said, the correct selector should not include spaces as per your observation:

.k-skeleton-pulse.k-skeleton ...

So, the first selector listed above should not be valid (including space):

.k-skeleton-pulse .k-skeleton ...

The theme I generated contains both of the selectors and as one of them is valid, the Skeleton animation delivers the expected result.

In case the theme you generated contains only the incorrect selector, the styles will not be applied and the animation will not be working. If so, you may share the exact steps performed in the ThemeBuilder that led to generating a theme with incorrect selectors. Thus, we will be able to test the scenario on our end. 

Last but not least, I logged a bug report in the kendo-themes repository, so our front-end engineers can revise the case in detail: https://github.com/telerik/kendo-themes/issues/4094.

Regards,
Nadezhda Tacheva
Progress Telerik