willmendesneto / ngx-skeleton-loader

Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
https://ngx-skeleton-loader-sample.stackblitz.io
MIT License
573 stars 49 forks source link

Skeleton loader animation scrolls outside of mat-card container #102

Closed shinkhouse closed 2 years ago

shinkhouse commented 2 years ago

I'm submitting a ... (check one with "x")

Current behavior

I'm using Angular Material with a mat-card, with skeleton loaders inside the card. Prior to upgrading to version 5.0.0 from version 1.2.2, the animation worked fine. Now, the animation scrolls outside the mat-card design for some reason. Any tips for how to mediate this issue? I've tried removing the animation all together but it still animates.

https://user-images.githubusercontent.com/12039637/155024853-42a9bad7-78ec-43d9-adf5-5a78d3227dec.mov

Screen Shot 2022-02-21 at 3 00 53 PM

I have some code like this, with no animation added.

<table>
                            <tbody>
                            <tr *ngFor="let n of ' '.repeat(20).split(' ')">
                                <th>
                                    <ngx-skeleton-loader appearance="line"  animation="none"></ngx-skeleton-loader>
                                </th>
                                <td>
                                    <ngx-skeleton-loader appearance="line"  animation="none"></ngx-skeleton-loader>
                                </td>
                            </tr>
                            </tbody>
                        </table>

I have also set animation at the forRoot module to false. Do you have any tips?

NgxSkeletonLoaderModule.forRoot({ animation: false }),

Expected behavior

It should appear something like this, but animated lines. This is the behavior that we are expecting but for version 1.x.x

Screen Shot 2022-02-21 at 2 57 28 PM

Reproduction of the problem

Updating from version ^1.2.2 to 5.0.0

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

"dependencies": {
    "@angular-material-components/datetime-picker": "^7.0.1",
    "@angular/animations": "~13.2.2",
    "@angular/cdk": "^13.2.2",
    "@angular/common": "~13.2.2",
    "@angular/compiler": "~13.2.2",
    "@angular/core": "~13.2.2",
    "@angular/flex-layout": "^13.0.0-beta.38",
    "@angular/forms": "~13.2.2",
    "@angular/material": "^13.2.2",
    "@angular/platform-browser": "~13.2.2",
    "@angular/platform-browser-dynamic": "~13.2.2",
    "@angular/router": "~13.2.2",
    "angular-gridster2": "^13.1.1",
    "angular-resize-event": "^1.2.1",
    "gts": "^3.1.0",
    "jwt-decode": "^2.2.0",
    "material-design-icons": "^3.0.1",
    "moment": "^2.29.1",
    "ngx-skeleton-loader": "^4.0.0",
    "ngx-toastr": "^14.2.1",
    "postcss": "^8.4.6",
    "prettier": "^2.5.1",
    "rxjs": "~6.5.4",
    "smoothscroll-polyfill": "^0.4.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.3",
    "@angular-devkit/build-ng-packagr": "~0.1002.4",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/schematics": "13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
    "@angular/cli": "^13.2.3",
    "@angular/compiler-cli": "~13.2.2",
    "@angular/language-service": "~13.2.2",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.11.0",
    "@typescript-eslint/parser": "^5.11.0",
    "codelyzer": "^5.1.2",
    "eslint": "^8.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.15",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.3",
    "typescript": "~4.5.5"
  }
shinkhouse commented 2 years ago

I figured out the issue, please disregard. :)