fix: lazyload fixing

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'
 })

agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.html

@@ -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 
+    *ngIf="!isLoading"
     class="gauge-chart"
     [Highcharts]="Highcharts"
     [options]="chartOptions"

agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.scss

@@ -3,32 +3,9 @@
     display: inline-block;
 }
 
-.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;
-}

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;
   }
   
 }