ngx-skeleton

⌛ Easily create skeleton loadings without SVG.

Demo

Live demo here.

Installation

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

npm install @hugodcrq/ngx-skeleton

Import NgxSkeletonModule in your app.module.

import { NgxSkeletonModule } from "@hugodcrq/ngx-skeleton";

@NgModule({
  imports: [NgxSkeletonModule],
})
class AppModule {}

Import library styles to your global styles.scss file

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

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

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

Basic Usage

In .ts component

import { Component, inject, OnInit } from "@angular/core";
import { NgxSkeletonService } from "@hugodcrq/ngx-skeleton";

@Component({})
export class AppComponent implements OnInit {
  skeleton = inject(NgxSkeletonService); // You can also inject via the constructor

  constructor() {}

  ngOnInit() {
    this.skeleton.show();

    // simulate long task (3s) and hide
    setTimeout(() => {
      this.skeleton.hide();
    }, 3000);
  }
}

In .html use hdSkeleton directive

<!-- with <div></div> wrapper for element without children -->
<div hdSkeleton>
  <h1>Title exemple</h1>
</div>

<!-- directly on parent if element has children or add <div></div> wrapper -->
<div class="card" hdSkeleton>
  <div class="card-header">Github logo</div>
  <div class="card-body">
    <img src="https://www.vectorlogo.zone/logos/github/github-ar21.svg" alt="github" />
  </div>
</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:

<type>[(<scope>)]: <emoji> <subject>
[BLANK LINE]
[body]
[BLANK LINE]
[breaking changes]
[BLANK LINE]
[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