Merge pull request #36 from sebgroup/develop

Develop

e2e/src/app.po.ts

@@ -21,7 +21,7 @@ export class AppPage {
     }
 
     eyesOpen() {
-        eyes.open(browser, 'Angular Generic Table', 'Demo time!');
+        eyes.open(browser, '@sebgroup/botstrap', 'Buttons');
     }
 
     eyesScreenshot(name: string) {

scss/load-bootstrap.scss

@@ -40,6 +40,7 @@
 @import "styles/carousel";
 @import "styles/utilities";
 @import "styles/fifth-element"; // SEB Specific
+@import "styles/skeleton-loader"; // SEB Specific
 @import "styles/scroll"; // SEB Specific
 @import "third-parties/third-parties"; // SEB Specific
 @import '~@sebgroup/fonts/scss/seb-fonts'; // SEB Specific

scss/styles/skeleton-loader.scss

@@ -0,0 +1,92 @@
+$skeleton-loader-mask-color: $white;
+.skeleton-loader {
+  //background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 87.7' class='skeleton-loader'%3E%3Cpath fill='%23FFF' d='M292 87.7H0V0h292v87.7zM80.7 20V3H3v17h77.7zm39.8 0V3h-36v17h36zm63.3 21.4v-17H3v17h180.8zm104.7 21.4v-17H3v17h285.5zm0 21.5v-17H3v17h285.5z'/%3E%3C/svg%3E");
+  //background: linear-gradient(to right, $gray-100 0%,$gray-300 100%);
+  position: relative;
+  overflow: hidden;
+  min-height: 153px;
+  &::before {
+    background: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 87.7' class='skeleton-loader'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M292 87.7H0V0h292v87.7zM80.7 20V3H3v17h77.7zm39.8 0V3h-36v17h36zm63.3 21.4v-17H3v17h180.8zm104.7 21.4v-17H3v17h285.5zm0 21.5v-17H3v17h285.5z'/%3E%3C/svg%3E"), "#", "%23");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 321'%3E%3Cdefs%3E%3Cstyle%3E .cls-1%7Bfill:%23fff%7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M310 0h410v57H310zM0 57h720v8H0zM0 89h720v8H0zM0 121h720v8H0zM0 153h720v8H0zM0 185h720v8H0zM230 65h8v24h-8zM290 97h8v24h-8zM375 129h8v24h-8zM238 161h8v24h-8zM0 217h720v8H0zM0 249h720v8H0zM0 281h720v8H0zM0 313h720v8H0zM200 0h8v57h-8zM450 65h270v24H450zM524 193h8v24h-8zM310 257h8v24h-8zM411 225h8v24h-8zM230 289h8v24h-8zM524 289h8v24h-8zM192 225h8v24h-8z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0z'/%3E%3C/svg%3E");
+    display: block;
+    position: absolute;
+    content: '';
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    background-position-x: 0, 520px;
+    background-size: 720px 321px;
+    background-repeat:no-repeat;
+  }
+  &::after {
+    background: linear-gradient(80deg, $gray-100 10%, $gray-200 80%, transparent 90%), $gray-100;
+    animation-duration: 2000ms;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: skeletonLoader;
+    animation-timing-function: ease-out;
+    background-size: 50% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    content: '';
+    z-index: 0;
+    height: 100%;
+    width: 100%;
+    top: 0;
+  }
+  &.skeleton-loader-table {
+    height: 195px;
+    &::before {
+      background-size: 600px 647px;
+      background-position-y: -1px;
+      background-repeat: repeat-x;
+      background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 87.7'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 0v87.7h292V0H0zm283.1 6h6.3v6.2h-6.3V6zm-19.7 0h18.1v6.2h-18.1V6zm-96.9 0h6.3v6.2h-6.3V6zm-47.3 0h45.7v6.2h-45.7V6zM86.1 6h6.3v6.2h-6.3V6zM52 6h32.5v6.2H52V6zM38.2 6h6.3v6.2h-6.3V6zM4.1 6h32.5v6.2H4.1V6zm0 8.3h285.3v1.3H4.1v-1.3zM152 20v6.2h-32.8V20H152zm-48.2 0v6.2H52V20h51.8zM4.1 20H40v6.2H4.1V20zm285.4 65.4H4.1v-.6h285.4v.6zM4.1 81.3v-6.2h25.4v6.2H4.1zm47.9 0v-6.2h47.5v6.2H52zm67.2 0v-6.2h41.3v6.2h-41.3zm170.3-.6c0 .3-.3.6-.6.6h-33.5c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h33.5c.3 0 .6.3.6.6v5zm0-9.3H4.1v-.6h285.4v.6zM4.1 67.3v-6.2h25.4v6.2H4.1zm47.9 0v-6.2h47.5v6.2H52zm67.2 0v-6.2h34.3v6.2h-34.3zm170.3-.6c0 .3-.3.6-.6.6h-33.5c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h33.5c.3 0 .6.3.6.6v5zm0-9.2H4.1V57h285.4v.5zM4.1 53.4v-6.2H40v6.2H4.1zm47.9 0v-6.2h27.8v6.2H52zm67.2 0v-6.2h63.6v6.2h-63.6zm170.3-.6c0 .3-.3.6-.6.6h-45.8c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h45.8c.3 0 .6.3.6.6v5zm0-8.6H4.1v-.6h285.4v.6zM4.1 40v-6.2h25.4V40H4.1zM52 40v-6.2h47.5V40H52zm67.2 0v-6.2h41.3V40h-41.3zm170.3-.6c0 .3-.3.6-.6.6h-33.5c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h33.5c.3 0 .6.3.6.6v5zm0-9.1H4.1v-.6h285.4v.6zm0-4.7c0 .3-.3.6-.6.6h-31c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h31c.3 0 .6.3.6.6v5z'/%3E%3C/svg%3E"), "#", "%23");
+      //background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 87.7'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 0v87.7h292V0H0zm283.1 6h6.3v6.2h-6.3V6zm-19.7 0h18.1v6.2h-18.1V6zm-96.9 0h6.3v6.2h-6.3V6zm-47.3 0h45.7v6.2h-45.7V6zM86.1 6h6.3v6.2h-6.3V6zM52 6h32.5v6.2H52V6zM38.2 6h6.3v6.2h-6.3V6zM4.1 6h32.5v6.2H4.1V6zm0 8.3h285.3v1.3H4.1v-1.3zM152 20v6.2h-32.8V20H152zm-48.2 0v6.2H52V20h51.8zM4.1 20H40v6.2H4.1V20zm285.4 65.4H4.1v-.6h285.4v.6zM4.1 81.3v-6.2h25.4v6.2H4.1zm47.9 0v-6.2h47.5v6.2H52zm67.2 0v-6.2h41.3v6.2h-41.3zm170.3-.6c0 .3-.3.6-.6.6h-33.5c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h33.5c.3 0 .6.3.6.6v5zm0-9.3H4.1v-.6h285.4v.6zM4.1 67.3v-6.2h25.4v6.2H4.1zm47.9 0v-6.2h47.5v6.2H52zm67.2 0v-6.2h34.3v6.2h-34.3zm170.3-.6c0 .3-.3.6-.6.6h-33.5c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h33.5c.3 0 .6.3.6.6v5zm0-9.2H4.1V57h285.4v.5zM4.1 53.4v-6.2H40v6.2H4.1zm47.9 0v-6.2h27.8v6.2H52zm67.2 0v-6.2h63.6v6.2h-63.6zm170.3-.6c0 .3-.3.6-.6.6h-45.8c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h45.8c.3 0 .6.3.6.6v5zm0-8.6H4.1v-.6h285.4v.6zM4.1 40v-6.2h25.4V40H4.1zM52 40v-6.2h47.5V40H52zm67.2 0v-6.2h41.3V40h-41.3zm170.3-.6c0 .3-.3.6-.6.6h-33.5c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h33.5c.3 0 .6.3.6.6v5zm0-9.1H4.1v-.6h285.4v.6zm0-4.7c0 .3-.3.6-.6.6h-31c-.3 0-.6-.3-.6-.6v-5c0-.3.3-.6.6-.6h31c.3 0 .6.3.6.6v5z'/%3E%3C/svg%3E"), "#", "%23");
+      background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 646'%3E%3Cdefs%3E%3Cstyle%3E .a%7Bfill:#{$skeleton-loader-mask-color}%7D %3C/style%3E%3C/defs%3E%3Cpath class='a' d='M450 122h56v24h-56zM0 0h600v8H0zM0 23h600v8H0zM0 32h600v8H0zM0 64h600v8H0zM0 73h600v8H0zM0 105h600v8H0zM0 114h600v8H0zM0 146h600v8H0zM84 8h32v15H84zM92 40h24v24H92zM76 81h40v24H76zM100 122h16v24h-16zM232 8h44v15h-44zM210 40h66v24h-66zM260 81h16v24h-16zM236 122h40v24h-40zM418 8h92v15h-92zM426 40h64v24h-64zM410 81h72v24h-72zM434 245h72v24h-72zM0 155h600v8H0zM0 187h600v8H0zM0 196h600v8H0zM0 228h600v8H0zM0 237h600v8H0zM0 269h600v8H0zM52 163h64v24H52zM76 204h40v24H76zM100 245h16v24h-16zM252 163h24v24h-24zM260 204h16v24h-16zM236 245h40v24h-40zM426 163h40v24h-40zM410 204h116v24H410zM391 368h115v24H391zM0 278h600v8H0zM0 310h600v8H0zM0 319h600v8H0zM0 351h600v8H0zM0 360h600v8H0zM0 392h600v8H0zM92 286h24v24H92zM76 327h40v24H76zM100 368h16v24h-16zM252 286h24v24h-24zM210 327h66v24h-66zM236 368h40v24h-40zM370 286h120v24H370zM410 327h56v24h-56zM376 491h90v24h-90zM0 401h600v8H0zM0 433h600v8H0zM0 442h600v8H0zM0 474h600v8H0zM0 483h600v8H0zM0 515h600v8H0zM92 409h24v24H92zM76 450h40v24H76zM100 491h16v24h-16zM252 409h24v24h-24zM260 450h16v24h-16zM236 491h40v24h-40zM450 409h40v24h-40zM410 450h72v24h-72zM434 614h72v24h-72zM0 524h600v8H0zM0 556h600v8H0zM0 565h600v8H0zM0 597h600v8H0zM0 606h600v8H0zM0 638h600v8H0zM92 532h24v24H92zM76 573h40v24H76zM100 614h16v24h-16zM252 532h24v24h-24zM260 573h16v24h-16zM236 614h40v24h-40zM426 532h64v24h-64zM410 573h72v24h-72zM584 8h16v15h-16zM584 40h16v24h-16zM584 81h16v24h-16zM584 122h16v24h-16zM584 163h16v24h-16zM584 204h16v24h-16zM584 245h16v24h-16zM584 286h16v24h-16zM584 327h16v24h-16zM584 368h16v24h-16zM584 409h16v24h-16zM584 450h16v24h-16zM584 491h16v24h-16zM584 532h16v24h-16zM584 573h16v24h-16zM584 614h16v24h-16z'/%3E%3C/svg%3E"), "#", "%23");    }
+  }
+}
+@include media-breakpoint-up(sm) {
+  .skeleton-loader::after {
+    //animation-duration: 1400ms;
+  }
+}
+@include media-breakpoint-up(md) {
+  .skeleton-loader {
+    min-height: 249px;
+    &::after {
+      animation-duration: 1800ms;
+    }
+  }
+  .skeleton-loader-table {
+    min-height: 237px;
+  }
+}
+@include media-breakpoint-up(lg) {
+  .skeleton-loader {
+    &::after {
+      animation-duration: 1600ms;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .skeleton-loader-table {
+    min-height: 277px;
+  }
+}
+
+@keyframes skeletonLoader {
+  0% {
+    //background-size: 0 100%;
+    //background-position: -100% 0;
+    //background-position: -100vw 0;
+    background-position-x: -100%;
+  }
+  70%, 100% {
+    //background-size: 100% 100%;
+    //background-position: 200% 0;
+    //background-position: 200vw 0;
+    background-position-x: calc(-100% + 1200px);
+  }
+}

src/app/app-routing.module.ts

@@ -22,6 +22,7 @@ import {TooltipsComponent} from '../example/components/tooltips/tooltips.compone
 import {AccordionComponent} from '../example/components/accordion/accordion.component';
 import {TypographyComponent} from '../example/components/typography/typography.component';
 import {AboutComponent} from './components/about/about.component';
+import {SkeletonLoaderComponent} from '../example/components/skeleton-loader/skeleton-loader.component';
 
 const routes: Routes = [
     { path: '', redirectTo: 'about', pathMatch: 'full' },
@@ -48,7 +49,8 @@ const routes: Routes = [
     { path: 'list-group', component: ListGroupComponent },
     { path: 'loaders', component: LoadersComponent },
     //{ path: 'wizard', component: WizardExampleComponent },
-    { path: '**', redirectTo: 'about' }
+    { path: 'skeleton-loader', component: SkeletonLoaderComponent },
+    { path: '**', redirectTo: 'about' },
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1,7 +1,7 @@
 <app-mobile-navigation></app-mobile-navigation>
 <app-side-navigation></app-side-navigation>
 <app-header></app-header>
-<div class="content" (window:scroll)="scroll($event)">
+<div class="content" (window:scroll)="scroll($event)" style="z-index: 0;">
   <!--<app-sub-header [scrollPosition]="scrollPosition"></app-sub-header>-->
   <div class="row">
     <div class="col mx-auto mt-5 mt-lg-0 pt-3 pt-lg-0" style="max-width: 920px">

src/app/components/about/about.component.html

@@ -1,4 +1,4 @@
-<h1 class="my-3">About</h1>
+<h1 class="px-3 px-md-0 my-3">About</h1>
 <div class="card mb-5">
   <div class="card-body">
     <h3 class="card-title">What is sebgroup/bootstrap?</h3>

src/app/components/header/header.component.html

@@ -1,4 +1,4 @@
-<header class="col-12 col-md-auto d-lg-none">
+<header class="col-12 d-lg-none bg-white border-bottom">
   <div class="row justify-content-between justify-content-lg-end h-100">
   <div class="col col-md-auto d-none d-md-flex brand">
     <div class="row mobile-header">
@@ -18,8 +18,10 @@
       <h3 class="mb-0">Bootstrap</h3>
     </div>
   <div class="col d-md-none px-0" *ngIf="activeTab">
+    {{activeTab}}
     <div class="row mobile-header h-100 align-items-center text-center no-gutters">
       <div class="col" ngClass="{{activeTab === 'start' ? 'active':''}}" (click)="showMenu('start')"><i class="fal fa-home fa-1x d-block"></i>Start</div>
+      <div class="col" ngClass="{{activeTab === 'base' ? 'active':''}}" (click)="showMenu('base')"><i class="fal fa-font fa-1x d-block"></i>Base</div>
       <div class="col" ngClass="{{activeTab === 'components' ? 'active':''}}" (click)="showMenu('components')"><i class="fal fa-bookmark fa-1x d-block"></i>Components</div>
     </div>
   </div>

src/app/components/header/header.component.scss

@@ -3,7 +3,7 @@
 header {
   height: 56px;
   position: fixed;
-  z-index: 2;
+  z-index: 1080;
   left: 0;
   //padding-left: 0;
 }

src/app/components/header/header.component.ts

@@ -55,8 +55,9 @@ export class HeaderComponent implements OnInit {
     getMenu() {
     }
 
-    showMenu(tab:  'start' | 'components') {
+    showMenu(tab:  'start' | 'components' | 'base') {
         this.menuService.switchTab(tab);
+        this.activeTab = tab;
     }
 
     toggleMenu() {

src/app/components/mobile-navigation/mobile-navigation.component.html

@@ -19,9 +19,19 @@ <h5 class="text-center position-absolute w-100" [@slideIn]="menu2State" *ngIf="m
   </div>
   <div [@slideOut]="menuState" *ngIf="menuState === 'show'" class="position-absolute w-100">
     <div class="row border-bottom px-3 align-items-center" *ngFor="let menuItem of mobileMenu">
-      <div class="col">
-        <a class="nav-link active" routerLink="{{menuItem.path}}" (click)="hideMobileNav()">{{menuItem.name}}</a>
-      </div>
+        <ng-container *ngIf="menuItem.path.substr(0,4) !== 'http'">
+          <div class="col">
+            <a class="nav-link" routerLink="{{menuItem.path}}" (click)="hideMobileNav()">{{menuItem.name}}</a>
+          </div>
+        </ng-container>
+        <ng-container *ngIf="menuItem.path.substr(0,4) === 'http'">
+          <div class="col">
+            <a class="nav-link" [href]="menuItem.path" target="_blank" (click)="hideMobileNav()">{{menuItem.name}}</a>
+          </div>
+          <div class="col-auto">
+            <i class="fal fa-external-link-square"></i>
+          </div>
+        </ng-container>
     </div>
   </div>
 

src/app/components/mobile-navigation/mobile-navigation.component.scss

@@ -4,8 +4,10 @@
   position: fixed;
   top: 56px;
   left: 0;
-  z-index: 1;
+  z-index: 1080;
   height: calc(100% - 56px);
+  overflow-y: auto;
+  overflow-x: hidden;
   .nav-link {
     color: $dark;
     padding: $spacer;

src/app/components/side-navigation/side-navigation.component.scss

@@ -8,12 +8,12 @@
   width: 256px;
   height: 100vh;
   position: fixed;
-  z-index: 100;
+  z-index: 1081;
   left: 0;
   &.active {
     transform: translate3d(0,0,0);
     display: block;
-    z-index: 100;
+    z-index: 1081;
   }
 }
 

src/app/services/menu.service.ts

@@ -76,6 +76,9 @@ export class MenuService {
     }, {
         name: 'Loaders',
         path: '/loaders'
+    }, {
+        name: 'Skeleton loaders',
+        path: '/skeleton-loader'
     }];
 
   constructor() {
@@ -101,17 +104,18 @@ export class MenuService {
     return this.$activeTab.asObservable();
   }
 
-  switchTab(tab:  'start' | 'components') {
+  switchTab(tab:  'start' | 'components' | 'base') {
     this.$activeTab.next(tab);
     this.updateMenu(tab);
   }
 
-  updateMenu(menu: 'start' | 'components') {
+  updateMenu(menu:  'start' | 'components' | 'base') {
     if (menu === 'start') {
       this.$menuItems.next(this.start);
-
+    } else if (menu === 'components') {
+        this.$menuItems.next(this.components);
     } else {
-      this.$menuItems.next(this.components);
+        this.$menuItems.next(this.base);
     }
   }
 }

src/example/components/alerts/alerts.component.html

@@ -1,4 +1,4 @@
-<a name="alerts"><h2 class="my-3">Alerts</h2></a>
+<a name="alerts"><h2 class="px-3 px-md-0 my-3">Alerts</h2></a>
 <div class="card mb-4">
   <div class="card-body">
     <h5>When to use alerts?</h5>

src/example/components/breadcrumbs/breadcrumbs.component.html

@@ -1,4 +1,4 @@
-<a name="breadcrumbs"><h2 class="my-3">Breadcrumbs</h2></a>
+<a name="breadcrumbs"><h2 class="px-3 px-md-0 my-3">Breadcrumbs</h2></a>
 <div class="card mb-4">
   <div class="card-body">
     <p>Use breadcrumbs to leave a trace so that the users can find their way back when navigating the app.</p>

src/example/components/icons/icons.component.html

@@ -1,4 +1,4 @@
-<h2 class="px-3 px-md-0">Icons</h2>
+<h2 class="px-3 px-md-0 my-3">Icons</h2>
 <p class="lead px-3 px-md-0">
   Font Aweseome 5 is the icon framework we're using.
 </p>

src/example/components/skeleton-loader/skeleton-loader.component.html

@@ -0,0 +1,51 @@
+<h2 class="px-3 px-md-0 my-3">Skeleton loader</h2>
+<div class="card">
+  <div class="card-body" id="skeletonLoader">
+    <div class="skeleton-loader"></div>
+    <exemplify [selector]="'#skeletonLoader .skeleton-loader'"></exemplify>
+  </div>
+  <div class="card-body" id="skeletonLoaderTable">
+    <div class="skeleton-loader skeleton-loader-table"></div>
+    <exemplify [selector]="'#skeletonLoaderTable .skeleton-loader-table'"></exemplify>
+  </div>
+</div>
+<div class="row mt-3 mt-xl-4">
+    <div class="col-12 col-sm">
+        <div class="card">
+            <div class="card-body">
+                <div class="skeleton-loader"></div>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 col-sm mt-3 mt-sm-0">
+        <div class="card">
+            <div class="card-body">
+                <div class="skeleton-loader"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row mt-3 mt-xl-4">
+    <div class="col-12 col-sm">
+        <div class="card">
+            <div class="card-body">
+                <div class="skeleton-loader"></div>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 col-sm mt-3 mt-sm-0">
+        <div class="card">
+            <div class="card-body">
+                <div class="skeleton-loader"></div>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 col-sm mt-3 mt-sm-0">
+        <div class="card">
+            <div class="card-body">
+                <div class="skeleton-loader"></div>
+            </div>
+        </div>
+    </div>
+</div>
+

src/example/components/skeleton-loader/skeleton-loader.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-skeleton-loader',
+  templateUrl: './skeleton-loader.component.html',
+  styles: []
+})
+export class SkeletonLoaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/example/components/tabs/tabs.component.html

@@ -1,4 +1,4 @@
-<a name="tabs"><h2 class="my-3">Tabs</h2></a>
+<a name="tabs"><h2 class="px-3 px-md-0 my-3">Tabs</h2></a>
 <div class="card mb-4">
   <div class="card-body">
     <p>Use tabs to enable easy switching between different content without navigating away. Tabs can be used on small screens like mobile devices too but consider switching to <a routerLink="/dropdowns">dropdowns</a> or a regular <a routerLink="/dropdowns">select</a> instead when tabs are displayed on mobiles.</p>

src/example/example.module.ts

@@ -30,6 +30,7 @@ import { PaginationComponent } from './components/pagination/pagination.componen
 import { TooltipsComponent } from './components/tooltips/tooltips.component';
 import { AccordionComponent } from './components/accordion/accordion.component';
 import { TypographyComponent } from './components/typography/typography.component';
+import { SkeletonLoaderComponent } from './components/skeleton-loader/skeleton-loader.component';
 library.add(faArrowAltRight);
 
 @NgModule({
@@ -62,7 +63,8 @@ library.add(faArrowAltRight);
       PaginationComponent,
       TooltipsComponent,
       AccordionComponent,
-      TypographyComponent
+      TypographyComponent,
+      SkeletonLoaderComponent
   ],
   exports: [ButtonsComponent]
 })