Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Skeleton loading animation, cleanup, more sizes

Browse Source
This commit is contained in:
Adina Țeudan 2022-11-29 04:14:54 +02:00
parent 6702aea4e3
commit 36aa594461
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/styles/common-loading.scss
View File

@ -45,3 +45,11 @@
transform: rotate(-360deg);
}
}
@keyframes fadeIn {
from { opacity: 0.4; }
}
.animate-flicker {
animation: fadeIn 0.8s infinite alternate;
}

4
src/assets/styles/common-utilities.scss
View File

@ -47,7 +47,7 @@ $sides: (top, bottom, left, right);
/* sk-w-${n} (in pixels) */
$skeleton-widths: (120, 200, 250, 340);
$skeleton-widths: (12, 110, 200, 250, 340);
@each $w in $skeleton-widths {
.sk-w-#{$w} {
max-width: #{$w}px;
@ -56,7 +56,7 @@ $skeleton-widths: (120, 200, 250, 340);
/* sk-h-${n} */
$skeleton-heights: (12, 20, 24);
$skeleton-heights: (6, 8, 12, 20, 24);
@each $h in $skeleton-heights {
.sk-h-#{$h} {
height: #{$h}px;

15
src/lib/skeleton/skeleton/skeleton.component.ts
View File

@ -9,21 +9,16 @@ import { SkeletonService } from '../../services';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SkeletonComponent {
x$ = new BehaviorSubject<string | null>('Dashboard');
@HostBinding('style.display') display = 'block';
@Input() templates: Record<string, TemplateRef<unknown>> = {};
// @HostBinding('style.display') display = 'none';
@HostBinding('style.display') display = 'none';
constructor(private readonly _skeletonService: SkeletonService) {
// this._skeletonService.type$.subscribe(type => {
// this.display = type ? 'block' : 'none';
// });
this._skeletonService.type$.subscribe(type => {
this.display = type ? 'block' : 'none';
});
}
get type$(): BehaviorSubject<string | null> {
return this.x$;
// return this._skeletonService.type$;
return this._skeletonService.type$;
}
}