Skip to content

hugodcrq/ngx-skeleton

Repository files navigation

semantic-release logo ngx-skeleton

npm MIT commitizen PRs styled with prettier hugodcrq semantic-release


⌛ Easily create skeleton loadings without SVG.

skeleton

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

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