Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ion-skeleton-text animation not working when dark color scheme is enabled

See original GitHub issue

Bug Report

Ionic version: [x] 5.x

Current behavior: <ion-skeleton-text> not working when dark color scheme is enabled.

Tested with Safari and Google Chrome.

https://user-images.githubusercontent.com/11733014/120227675-e678a700-c249-11eb-9c46-6fb9fd5bca12.mov

Expected behavior: <ion-skeleton-text> animation should be visible when dark color scheme is enabled

Related code:

<h1>
  <ion-skeleton-text animated style="width: 80%; height: 50px"></ion-skeleton-text>
</h1>

Ionic info:

Ionic:

   Ionic CLI                     : 6.16.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.8
   @angular-devkit/build-angular : 12.0.2
   @angular-devkit/schematics    : 12.0.2
   @angular/cli                  : 12.0.2
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.0.0
   @capacitor/android : 3.0.0
   @capacitor/core    : 3.0.0
   @capacitor/ios     : 3.0.0

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   NodeJS : v16.2.0 (/usr/local/Cellar/node/16.2.0/bin/node)
   npm    : 7.15.0
   OS     : macOS Big Sur

Issue Analytics

State:
Created 2 years ago
Comments:14 (5 by maintainers)

Top GitHub Comments

1reaction

SvenTiigicommented, Jun 2, 2021

Yeah that might be the reason. Thank you for your help 🙌

1reaction

SvenTiigicommented, Jun 2, 2021

Issue is now fixed 😅 There was one more configuration in my angular.json which caused this strange bug.

My angular.json had an allowedCommonJsDependencies configuration and after removing this configuration the <ion-skeleton-text> was animating correctly again in production mode.

But sadly I can’t tell why this configuration field is causing this bug for Angular Production Mode when displaying an <ion-skeleton-text> with dark color scheme enabled.

Top Results From Across the Web

How do I change the colors of the animated skeleton text?

I've been trying to change the color of the animated ion-skeleton-text component to get some more contracts with my dark background.

Why is ion-skeleton-text not displaying when expression is met

I am setting up a fake display for a list of data from firebase in Ionic 4.2 using ion-skeleton ...

prefers-reduced-motion - CSS: Cascading Style Sheets | MDN

This example has a scaling animation by default. If Reduce Motion is enabled in your accessibility preferences, the animation is toned down to...

Angular 12 Skeleton Loader Gray Animation Effect Like ...

The skeleton loaders depict the placeholder of the same structure for data going to be loaded. This Angular post is compatible with Angular...

Unreal Game Sync Troubleshooting

This is usually a Perforce related error, and not necessarily UGS-related. If your workspace has issues, first try force-syncing the entire engine directory ......