Change Log

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

Unreleased

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.

2.10.1 - 2021-07-13

Fixed

Ensures every ARIA progressbar node has an accessible name. This is caused by missing aria-label on the <span> element.

Thanks @rkristelijn for raising the issue and the pull request!

2.10.0 - 2021-06-15

Added

Adding module configuration support via forRoot() method. Now you can add configure your module via forRoot(). You can now set the default of appearance, animation, theme, loadingText, count and/or items.E.G.

@NgModule({
  // ...
  imports: [NgxSkeletonLoaderModule.forRoot({ appearance: 'circle', count: 3 )],
  // ...
})

2.9.2 - 2021-04-11

Updated

Updating link in README.md

Fixed

Bumping dev dependencies to avoid security issues

2.9.1 - 2021-02-20

Fixed

Adding appearance attribute to be checked via ngOnChanges

Updated

Updating examples with new features

2.9.0 - 2021-02-19

Added

Adding validation for @Input attributes that needs internal manipulation. After these changes:
- if count is not a numeric value, it will use the default value as 1
- if animation is not a valid attribute, it will use the default value as progress
- PS: The other values alredy have a fallback, so nothing to worry here
Adding error feedback for appearance attribute in case of wrong configuration. Now it will show a error message on the console in case of receiving a wrong value

Updated

Adding ngOnChange to validate count input in case of changes via binding
Updating README.md with information about appearance and theme usage.

2.8.0 - 2021-02-18

Fixed

Using ngAcceptInputType_count for template checking in count input. That solves issue #59. You can find more details about it in https://angular.io/guide/template-typecheck
Fixing type issues on yarn build:ssr command

Updated

Updating perf-marks to v1.14.1
Adding strict mode support in module
Updating types for theme to match with ngStyle. More details in https://angular.io/api/common/NgStyle#properties

2.7.0 - 2021-02-06

Added

Adding new loadingText attribute to be used as WAI-ARIA aria-valuetext. In this case, it will render the component using "Please wait ...". Otherwise, it defaults to "Loading..."

<!-- Passing loading text to be used as WAI-ARIA `aria-valuetext` -->
<!-- In this case, it will render the component using "Please wait ..." -->
<!-- Otherwise, it defaults to "Loading..." -->
<div class="skeleton-with-specific-loading-text">
  <ngx-skeleton-loader loadingText="Please wait ..."></ngx-skeleton-loader>
</div>

Updated

Using OnPush as changeDetection mechanism into ngx-skeleton-loader component
Adding ability to pass false as string or boolean (coming from variable value via binding) on animation attribute in ngx-skeleton-loader component configuration. animation will receive false as string when attribute field it's not using binding. Component now can receive false (boolean), "false" (string), or any other animation type via binding.

<div class="item">
  <!-- Disables the animation -->
  <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
  <!-- Disables the animation, but receiving boolean value from binding -->
  <!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type -->
  <ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue"></ngx-skeleton-loader>
  <!-- Uses `progress` as animation -->
  <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
  <ngx-skeleton-loader></ngx-skeleton-loader>
  <!-- Uses `pulse` as animation -->
  <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
</div>

2.6.2 - 2020-12-08

Fixed

Removing Lighthouse "Avoid non-composited animations" issue. Lighthouse shows warnings from ngx-skeleton-loader.scss -file (progress).
"Avoid non-composited animations":
"Animations which are not composited can be janky and contribute to CLS"

To solve that, instead of using CSS background-position the module is now using CSS translate3d, which improves the animation by using GPU instead of CPU. Issue fixed and performance boost added 🎉

2.6.1 - 2020-11-30

Fixed

Solving forRoot() types error Generic type 'ModuleWithProviders<T>' requires 1 type argument(s). Closes #51

2.6.0 - 2020-11-15

Added

Adding NgxSkeletonLoaderModule.forRoot() method. Usage:

import { NgModule } from '@angular/core';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
// ... list of other app dependencies

import { AppComponent } from './app.component';
// ... list of other app components/modules

@NgModule({
  declarations: [AppComponent],
  imports: [NgxSkeletonLoaderModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2.5.0 - 2020-10-10

Fixed

Fixing bundle size command on CircleCI pipeline

Updated

Upgrading NodeJS to v14.11.0
Updating perf-marks package to v1.14.0
Improving skeleton animations fps by using cubic-bezier instead of ease-in-out

2.4.4 - 2020-08-21

Fixed

Remove check requirements if perf-marks is running in a browser or not in Angular apps 🔥

Added

Adding Angular Universal support for examples. Now we can run npm run dev:ssr and access http://localhost:4200/index.html and the page will run using angular universal 💪
Adding .prettierrc file with some of the code styling rules

2.4.3 - 2020-08-13

Fixed

Avoiding perf-marks call if running in Angular Universal applications

2.4.2 - 2020-08-01

Updated

Bumping perf-marks to latest version

2.4.1 - 2020-08-01

Updated

Bumping perf-marks to latest version

2.4.0 - 2020-08-01

Added

Adding User Timing API to track component render and content loader time

Updated

Updating examples with new skeleton simulation
Adding Stackblitz link for user card skeleton loading demo

2.3.0 - 2020-08-01

Added

Adding User Timing API to track component render and content loader time

Updated

Updating examples with new skeleton simulation
Adding Stackblitz link for user card skeleton loading demo

2.2.1 - 2020-06-30

Fixed

For compatibility with IE11 by using indexOf instead of includes

Updated

Updating npm run postinstall command to follow the new rules from update.angular.io website

2.2.0 - 2020-06-01

Added

Using prefers-reduced-motion to respect user’s OS option to Reduce Motion. More details about prefers-reduced-motion in https://web.dev/prefers-reduced-motion/

2.1.0 - 2020-06-01

Updated

Upgrading @angular/cli to version 9
🎉 Decreasing bundle size to 1.17KB 🎉

2.0.0 - 2020-05-15

Updated

Upgrading NodeJS to v12.16.2
Updating documentation with animation attribute

Added

Supporting for new animation progress-dark to enable users when using theme with darker color schema
Supporting for different animations 🎉

Now we can define the animation we want to use in <ngx-skeleton-loader> component via animation input. It's a string that can defined the animation used during the loading, having as options:

false: it will disable the animation;
progress - default: it will use it progress as animation;
pulse: it will use pulse as animation;

progress is the default animation, used as the single one previously. If you don't pass the animation attribute, it defaults to progress.

<div class="item">
  <!-- Disables the animation -->
  <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
  <!-- Uses `progress` as animation -->
  <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
  <ngx-skeleton-loader></ngx-skeleton-loader>
  <!-- Uses `pulse` as animation -->
  <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
</div>

Supporting enabling/disabling animations. Now the users will be able to enable/disable animations by using animation input. It's a string with false as value that the component receives to check if it should not load progress animation.

It works only to disable it. In case you want to keep enable it

<div class="item">
  <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
</div>

1.2.7 - 2020-04-13

Updated

Decreasing bundle size after disable Ivy in production build
Adding description, keywords and github information on package.json files

1.2.6 - 2020-02-26

Fixed

Changing angular library configuration to prod and forcing it at publish time

1.2.5 - 2020-02-25

Fixed

Changing angular library configuration to prod

1.2.4 - 2020-02-25

Updated

Updating Github templates
Updating Angular CLI to v9

1.2.3 - 2020-02-25

Fixed

Solving peerDependency warning when installing library in an Angular 9 project

1.2.2 - 2019-06-22

Fixed

Fixing component dimensions via theme

1.2.1 - 2019-06-08

Updated

Updating Angular CLI to v8

1.2.0 - 2019-04-19

Updated

Updating Angular CLI to 7.3.8

1.1.2 - 2019-01-07

Added

Adding badges for stackblitz, bundlephobia and license

Updated

Removing unnecessary CSS styles for skeleton

1.1.1 - 2018-12-17

Fixed

Fixing Stackblitz link demo link

1.1.0 - 2018-12-17

Added

Added GitHub urls into package.json
Added Circle CI integration
Added Coveralls integration
Added GitHub templates
Added CODE_OF_CONDUCT.md with the Code of conduct
Added unit tests for skeletons and demo components

Updated

Decreased bundle size
New gif showing ngx-skeleton-loader in action

1.0.2 - 2018-12-16

Fixed

Added markdown files in dist folder in build time

1.0.1 - 2018-12-16

Fixed

Added markdown files in dist folder in build time

1.0.0 - 2018-12-16

Fixed

Fixed build script

0.0.1 - 2018-12-16

Added

Created ngx-skeleton-loader
Created test automation for the module

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

Change Log

Unreleased

9.0.0 - 2024-01-13

Updated

8.1.0 - 2023-09-12

Fixed

Updated

8.0.2 - 2023-09-11

Fixed

8.0.1 - 2023-08-30

Fixed

8.0.0 - 2023-06-20

Updated

Removed

7.0.0 - 2023-02-04

Added

Updated

Fixed

6.0.0 - 2022-08-18

Updated

Breaking Change

5.0.0 - 2022-02-08

Updated

Breaking Change

4.0.0 - 2021-07-28

Fixed

Breaking Change

3.0.0 - 2021-07-23

Added

Breaking Change

2.10.1 - 2021-07-13

Fixed

2.10.0 - 2021-06-15

Added

2.9.2 - 2021-04-11

Updated

Fixed

2.9.1 - 2021-02-20

Fixed

Updated

2.9.0 - 2021-02-19

Added

Updated

2.8.0 - 2021-02-18

Fixed

Updated

2.7.0 - 2021-02-06

Added

Updated

2.6.2 - 2020-12-08

Fixed

2.6.1 - 2020-11-30

Fixed

2.6.0 - 2020-11-15

Added

2.5.0 - 2020-10-10

Fixed

Updated

2.4.4 - 2020-08-21

Fixed

Added

2.4.3 - 2020-08-13

Fixed

2.4.2 - 2020-08-01

Updated

2.4.1 - 2020-08-01

Updated

2.4.0 - 2020-08-01

Added

Updated

2.3.0 - 2020-08-01

Added

Updated

2.2.1 - 2020-06-30