skeleton list component

ui/src/app/components/skeleton-list/skeleton-list.component.html

@@ -0,0 +1,16 @@
+<ng-container *ngIf="groups">
+  <ng-container *ngFor="let g of groupsArr">
+    <ion-item-divider></ion-item-divider>
+    <div *ngFor="let r of rowsArr" class="post">
+      <div class="label"></div>
+      <div class="note"></div>
+    </div>
+  </ng-container>
+</ng-container>
+
+<ng-container *ngIf="!groups">
+  <div *ngFor="let r of rowsArr" class="post">
+    <div class="label"></div>
+    <div class="note"></div>
+  </div>
+</ng-container>

ui/src/app/components/skeleton-list/skeleton-list.component.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { SkeletonListComponent } from './skeleton-list.component'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+
+@NgModule({
+  declarations: [
+    SkeletonListComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+  ],
+  exports: [SkeletonListComponent],
+})
+export class SkeletonListComponentModule { }

ui/src/app/components/skeleton-list/skeleton-list.component.scss

@@ -0,0 +1,44 @@
+$base-color: #3e3e3e;
+$shine-color: #454545;
+$animation-duration: 1.2s;
+
+@mixin background-gradient {
+  background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px);
+  background-size: 100px;
+}
+
+.post {
+  height: 52px;
+  position: relative;
+  left: 12px;
+  background-color: var(--ion-item-background);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: #262626;
+  .label {
+    float: left;
+    left: 30px;
+    width: 50%;
+    height: 24px;
+    margin: 14px 0;
+    border-radius: 7px;
+    @include background-gradient;
+    animation: shine-lines $animation-duration infinite linear
+  }
+  .note {
+    float: right;
+    position: relative;
+    right: 24px;
+    width: 25%;
+    height: 24px;
+    margin: 14px 0;
+    border-radius: 7px;
+    @include background-gradient;
+    animation: shine-lines $animation-duration infinite linear
+  }
+}
+
+@keyframes shine-lines {
+  0% { background-position: -100px; }
+  40%, 100% { background-position: 140px; }
+}

ui/src/app/components/skeleton-list/skeleton-list.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'skeleton-list',
+  templateUrl: './skeleton-list.component.html',
+  styleUrls: ['./skeleton-list.component.scss'],
+})
+export class SkeletonListComponent {
+  @Input() groups: number
+  @Input() rows: number = 3
+  groupsArr: number[] = []
+  rowsArr: number[] = []
+
+  ngOnInit () {
+    if (this.groups) {
+      this.groupsArr = Array(Number(this.groups)).fill(0).map((_, i) => i)
+    }
+    this.rowsArr = Array(Number(this.rows)).fill(0).map((_, i) => i)
+  }
+}