ngx-skeleton

⌛ Easily create skeleton loadings without SVG.

Demo

Live demo here.

Installation

Install ngx-skeleton via NPM, using the command below.

1npm install @hugodcrq/ngx-skeleton

Import NgxSkeletonModule in your app.module.

1import { NgxSkeletonModule } from "@hugodcrq/ngx-skeleton";
2
3@NgModule({
4  imports: [NgxSkeletonModule],
5})
6class AppModule {}

Import library styles to your global styles.scss file

1@use "node_modules/@hugodcrq/ngx-skeleton/src/styles/styles.scss";

or if you use CSS add this to your styles inside your angular.json:

1{
2  // projects.[your_project].architect.build.options
3  "styles": ["node_modules/@hugodcrq/ngx-skeleton/src/styles/styles.css"]
4}

Basic Usage

In .ts component

1import { Component, inject, OnInit } from "@angular/core";
2import { NgxSkeletonService } from "@hugodcrq/ngx-skeleton";
3
4@Component({})
5export class AppComponent implements OnInit {
6  skeleton = inject(NgxSkeletonService); // You can also inject via the constructor
7
8  constructor() {}
9
10  ngOnInit() {
11    this.skeleton.show();
12
13    // simulate long task (3s) and hide
14    setTimeout(() => {
15      this.skeleton.hide();
16    }, 3000);
17  }
18}

In .html use hdSkeleton directive

1<!-- with <div></div> wrapper for element without children -->
2<div hdSkeleton>
3  <h1>Title exemple</h1>
4</div>
5
6<!-- directly on parent if element has children or add <div></div> wrapper -->
7<div class="card" hdSkeleton>
8  <div class="card-header">Github logo</div>
9  <div class="card-body">
10    <img src="https://www.vectorlogo.zone/logos/github/github-ar21.svg" alt="github" />
11  </div>
12</div>

Development

• Git
  • Commit message
    • Use npm script
    • Use git
    • Format
    • Type

To respect the standard of Conventional Commits, things have been put in place, for more information see the git section below.

Currently runs with:

• angular - Building mobile and desktop web applications
• semantic-release - Fully automated version management and package publishing
• commitlint - Checks if your commit messages meet the conventional commit format
• commitizen - Simple commit conventions from terminal prompt
• cz-git - Adapter for commitizen to custom easy configuration

Git

Commit message

By default git-commit is disable with a pre-commit hook to force usage of npm run commit

Use npm script

This command allow to create formatted commit message from prompt with commitizen & cz-git.

npm run commit

Use git

You can disable pre-commit hook with --no-verify flag. But respect these rules below ⬇️

git commit --no-verify

• Format

  • A commit message consists of a header, body and footer.
  • The header has a type and a subject:

1<type>[(<scope>)]: <emoji> <subject>
2[BLANK LINE]
3[body]
4[BLANK LINE]
5[breaking changes]
6[BLANK LINE]
7[footer]

• Type

  • ✨ feat — A new feature
  • 🐛 fix — A bug fix
  • 📝 docs — Documentation only changes
  • 💄 style — Markup, white-space, formatting, missing semi-colons... not affect the meaning of the code
  • ♻ refactor — A code change that neither fixes a bug or adds a feature
  • ⚡ perf — A code change that improves performance
  • ✅ test — Adding missing tests
  • 📦️ build — Changes that affect the build system or external dependencies
  • 🎡 ci — CI related changes
  • 🔨 chore — Other changes that don't modify src or test files
  • ⏪️ revert — Reverts a previous commit