From 4a77bab8f2362994c247a5c613ca9efa48d1ff6f Mon Sep 17 00:00:00 2001
From: Desy Ayurianti <desii.ayurianti@gmail.com>
Date: Tue, 17 Sep 2024 16:06:10 +0700
Subject: [PATCH] fix: lazyload fixing

---
 .../src/app/pages/auth/auth.component.ts      |  4 ++-
 .../gauge-chart/gauge-chart.component.html    | 11 +++----
 .../gauge-chart/gauge-chart.component.scss    | 31 +++----------------
 .../page/gauge-chart/gauge-chart.component.ts |  3 +-
 4 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/agrilink_vocpro/src/app/pages/auth/auth.component.ts b/agrilink_vocpro/src/app/pages/auth/auth.component.ts
index 470ce78..5415454 100644
--- a/agrilink_vocpro/src/app/pages/auth/auth.component.ts
+++ b/agrilink_vocpro/src/app/pages/auth/auth.component.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
 
 @Component({
   selector: 'app-auth',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './auth.component.html',
   styleUrl: './auth.component.scss'
 })
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.html b/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.html
index 1773455..eb6e183 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.html
@@ -1,9 +1,8 @@
-<div *ngIf="isLoading" class="loading-overlay">
-    <div class="loading-state">
-      <div class="loading"></div>
-    </div>
-  </div>
-<highcharts-chart
+<div *ngIf="isLoading" class="loading">
+    Loading...
+</div>
+<highcharts-chart 
+    *ngIf="!isLoading"
     class="gauge-chart"
     [Highcharts]="Highcharts"
     [options]="chartOptions"
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.scss b/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.scss
index 36943d0..3a5d04c 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.scss
@@ -3,32 +3,9 @@
     display: inline-block;
 }
 
-.loading {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    border: 7px solid #ddd;
-    border-top-color: rgb(28, 12, 203);
-    animation: loading 1s linear infinite;
+.loading{
+    font-size: 18px;
+    text-align: center;
+    color: #888;
 }
 
-.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;
-}
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts b/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts
index b0d5400..500d81c 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts
@@ -32,7 +32,6 @@ export class GaugeChartComponent {
   constructor() {}
 
   ngOnChanges() {
-    this.isLoading = false;
     this.chartOptions = {
       
       chart: {
@@ -96,6 +95,8 @@ export class GaugeChartComponent {
         }
       }] as Highcharts.SeriesSolidgaugeOptions[]
     };
+
+    this.isLoading = false;
   }
   
 }