ngx-skeleton-loader - npm Package Versions

[9.0.0][] - 2024-01-13

Updated

• Upgrading @angular/* packages to v17
• Upgrading NodeJS to v20.10.0

[8.1.0][] - 2023-09-12

Fixed

• fixing issue with optional chaining not being supported on apps using Angular CLI <=v11;

Updated

• Updated input values validation in order to remove optional chaining. Instead, the code is now using object destructuring to get config theme value;

[8.0.2][] - 2023-09-11

Fixed

• Fixing README.md docs

[8.0.1][] - 2023-08-30

Fixed

• Fixing CSS reduce motion in MacOS;

[8.0.0][] - 2023-06-20

Updated

• Updating project to support Angular v16;
• Updating NodeJS version to v18;
• Updating peerDependencies to point to latest @angular/* packages;

Removed

• Removing perf-marks dependency library;

[7.0.0][] - 2023-02-04

Added

• Adding support for extending global theme added via NgxSkeletonLoaderModule.forRoot({ theme: /* ...list of CSS atributes */} })

By default when using NgxSkeletonLoaderModule.forRoot({ theme: /* ...list of CSS atributes */} }) the application is using this value as source of truth, overriding any local theming passed to <ngx-skeleton-loader> component via [theme] input.

By using NgxSkeletonLoaderModule.forRoot({ theme: { extendsFromRoot: true, /* ...list of CSS atributes */} }) in your application, you should also be aware that:

• By default, every <ngx-skeleton-loader> component will use theme coming from NgxSkeletonLoaderModule.forRoot() as the source of truth
• If there's any CSS attribute on the component locally which overrides the CSS spec, it combines both themes, but overriding global CSS attributes in favor of local ones.

<!-- 
  // ... E.G: App is using this configuration below

  NgxSkeletonLoaderModule.forRoot({
    theme: {
      // Enabliong theme combination
      extendsFromRoot: true,
      // ... list of CSS theme attributes
      height: '30px',
    },
  }),
-->

<div class="item">
  <ngx-skeleton-loader></ngx-skeleton-loader>
  <!-- above line will produce a skeleton component using `height: 30px;`" -->
  <ngx-skeleton-loader [theme]="{background: 'blue'}"></ngx-skeleton-loader>
  <!-- above line will produce a skeleton component using `height: 30px; background: blue;`" -->
  <ngx-skeleton-loader [theme]="{height: '50px', background: 'red'}"></ngx-skeleton-loader>
  <!-- above line will produce a skeleton component using `height: 50px; background: red;`" -->
</div>

• Adding new custom-content appearance. From now on, consumers can now add their own content inside <ng-skeleton-loader></ng-skeleton-loader> component. So that, they can add some custom content, such as SVG, as an example
• Adding examples for custom-content usage

Updated

• Updagrading module to Angular v15

Fixed

• Removing build warnings

[6.0.0][] - 2022-08-18

Updated

• Adding Publishing setup using NPX
• Replacing CSS class namespace from .loader to .skeleton-loader

Breaking Change

The CSS class used as namespace was changed. Previously, it was called .loader and now is .skeleton-loader. It might cause some issues in cases of :host DOM style scoping usage. For the sake of semantic versioning, please bear in mind this scenario in case of :host usage.

[5.0.0][] - 2022-02-08

Updated

Thanks @yharaskrik

Breaking Change

Bundle distribution are now esm2020, fesm2015 and fesm2020. UMD and CommonJS versions were support were removed from Angular CLI directly. So the next version for the package will be a major version to cover these changes accordingly.

• Updating package bundle distribution
• Updating @angular/cli to v13
• Applying project changes to v13
• Updating bundlesize check to point to fesm2020

[4.0.0][] - 2021-07-28

Fixed

Breaking Change

• Rolling back "Adding mechanism to prevents calling forRoot() more than once if module is loaded asynchronously in a submodule.". Unfortunately, this was affecting consumers and it needed to be reverted to avoid friction in other applications.

If you need to have this feature in place, the suggestion is to create a specific module in your app and apply the changes on your application.

[3.0.0][] - 2021-07-23

Added

Breaking Change

• Adding mechanism to prevents calling forRoot() more than once if module is loaded asynchronously in a submodule. This is required in order to avoid issues in consumers. To avoid that, consumers should load the module once on the main module instead - if loading submodules async.