fix: lazyload fixing

This commit is contained in:
Desy Ayurianti 2024-09-17 16:06:10 +07:00
parent a3412a36d5
commit 4a77bab8f2
4 changed files with 14 additions and 35 deletions

View File

@ -1,9 +1,11 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({ @Component({
selector: 'app-auth', selector: 'app-auth',
standalone: true, standalone: true,
imports: [], imports: [RouterLink],
templateUrl: './auth.component.html', templateUrl: './auth.component.html',
styleUrl: './auth.component.scss' styleUrl: './auth.component.scss'
}) })

View File

@ -1,9 +1,8 @@
<div *ngIf="isLoading" class="loading-overlay"> <div *ngIf="isLoading" class="loading">
<div class="loading-state"> Loading...
<div class="loading"></div>
</div>
</div> </div>
<highcharts-chart <highcharts-chart
*ngIf="!isLoading"
class="gauge-chart" class="gauge-chart"
[Highcharts]="Highcharts" [Highcharts]="Highcharts"
[options]="chartOptions" [options]="chartOptions"

View File

@ -4,31 +4,8 @@
} }
.loading{ .loading{
width: 30px; font-size: 18px;
height: 30px; text-align: center;
border-radius: 50%; color: #888;
border: 7px solid #ddd;
border-top-color: rgb(28, 12, 203);
animation: loading 1s linear infinite;
} }
.loading-state {
position: absolute;
top: 50%;
left: 50%;
z-index: 9999;
transform: translate(-50%, -50%);
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}

View File

@ -32,7 +32,6 @@ export class GaugeChartComponent {
constructor() {} constructor() {}
ngOnChanges() { ngOnChanges() {
this.isLoading = false;
this.chartOptions = { this.chartOptions = {
chart: { chart: {
@ -96,6 +95,8 @@ export class GaugeChartComponent {
} }
}] as Highcharts.SeriesSolidgaugeOptions[] }] as Highcharts.SeriesSolidgaugeOptions[]
}; };
this.isLoading = false;
} }
} }