From 86737ebe6ad2d818c126c7ae2e85756f1a881b75 Mon Sep 17 00:00:00 2001
From: kaiiiz <ukaizheng@gmail.com>
Date: Sun, 12 Mar 2023 22:08:55 +0800
Subject: [PATCH] Fix duplicate requests in picsur-img.component

This is caused by improper initial state (Loading) that triggers `onInview` multiple times.
---
 .../src/app/components/picsur-img/picsur-img.component.html | 2 +-
 .../src/app/components/picsur-img/picsur-img.component.ts   | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/picsur-img/picsur-img.component.html b/frontend/src/app/components/picsur-img/picsur-img.component.html
index b5adce05..75846376 100644
--- a/frontend/src/app/components/picsur-img/picsur-img.component.html
+++ b/frontend/src/app/components/picsur-img/picsur-img.component.html
@@ -16,5 +16,5 @@
 <mat-spinner
   (nguiInview)="onInview($event)"
   (nguiOutview)="onOutview($event)"
-  *ngIf="state === 'loading'"
+  *ngIf="state === 'init' || state === 'loading'"
 ></mat-spinner>
diff --git a/frontend/src/app/components/picsur-img/picsur-img.component.ts b/frontend/src/app/components/picsur-img/picsur-img.component.ts
index b2ebf325..2600fa98 100644
--- a/frontend/src/app/components/picsur-img/picsur-img.component.ts
+++ b/frontend/src/app/components/picsur-img/picsur-img.component.ts
@@ -17,6 +17,7 @@ import { Logger } from 'src/app/services/logger/logger.service';
 import { QoiWorkerService } from 'src/app/workers/qoi-worker.service';
 
 enum PicsurImgState {
+  Init = 'init',
   Loading = 'loading',
   Canvas = 'canvas',
   Image = 'image',
@@ -39,7 +40,7 @@ export class PicsurImgComponent implements OnChanges {
 
   @Input('src') imageURL: string | undefined;
 
-  public state: PicsurImgState = PicsurImgState.Loading;
+  public state: PicsurImgState = PicsurImgState.Init;
 
   constructor(
     private readonly qoiWorker: QoiWorkerService,
@@ -113,7 +114,8 @@ export class PicsurImgComponent implements OnChanges {
   onInview(e: any) {
     this.isInView = true;
 
-    if (this.state === PicsurImgState.Loading) {
+    if (this.state === PicsurImgState.Init) {
+      this.state = PicsurImgState.Loading;
       this.reload();
     }
   }