refactor/AB#82357_update-angular-fix-memory-leak-issues-and-other-fixes fix: add missing timeout teardown logic

Author: unai-reliefapp

libs/shared/src/lib/components/geospatial-map/geospatial-map.component.ts

@@ -133,11 +133,6 @@ export class GeospatialMapComponent
    */
   private disableGeomanToolsFlag = false;
 
-  // output
-  /**
-   * Timeout for the reverse search
-   */
-  private timeout: ReturnType<typeof setTimeout> | null = null;
   /**
    * Output for the map change
    */

libs/shared/src/lib/components/ui/map/map-popup/map-popup.service.ts

@@ -96,12 +96,15 @@ export class MapPopupService {
         }
         // We will bind and unbind each time we set the popup for dynamic purposes
         layerToBind?.unbindPopup();
+        if (this.timeoutListener) {
+          clearTimeout(this.timeoutListener);
+        }
         instance.destroy();
       });
       if (this.timeoutListener) {
         clearTimeout(this.timeoutListener);
       }
-      setTimeout(() => {
+      this.timeoutListener = setTimeout(() => {
         // Reset default popup
         if (this.popupPane) {
           this.popupPane.className = 'leaflet-pane leaflet-popup-pan';

libs/shared/src/lib/components/widgets/editor/editor.component.ts

@@ -7,6 +7,7 @@ import {
   HostListener,
   Renderer2,
   ElementRef,
+  OnDestroy,
 } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { Apollo } from 'apollo-angular';
@@ -46,7 +47,10 @@ import { Router } from '@angular/router';
   templateUrl: './editor.component.html',
   styleUrls: ['./editor.component.scss'],
 })
-export class EditorComponent extends UnsubscribeComponent implements OnInit {
+export class EditorComponent
+  extends UnsubscribeComponent
+  implements OnInit, OnDestroy
+{
   /** Widget settings */
   @Input() settings: any;
   /** Should show padding */
@@ -685,4 +689,11 @@ export class EditorComponent extends UnsubscribeComponent implements OnInit {
       );
     }
   }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    if (this.timeoutListener) {
+      clearTimeout(this.timeoutListener);
+    }
+  }
 }

libs/shared/src/lib/components/widgets/summary-card/summary-card-item-content/summary-card-item-content.component.ts

@@ -4,6 +4,7 @@ import {
   HostListener,
   Input,
   OnChanges,
+  OnDestroy,
   OnInit,
   Optional,
   Renderer2,
@@ -32,7 +33,7 @@ import { Router } from '@angular/router';
 })
 export class SummaryCardItemContentComponent
   extends UnsubscribeComponent
-  implements OnInit, OnChanges
+  implements OnInit, OnChanges, OnDestroy
 {
   /** Html template */
   @Input() html = '';
@@ -261,4 +262,11 @@ export class SummaryCardItemContentComponent
       });
     }
   }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    if (this.timeoutListener) {
+      clearTimeout(this.timeoutListener);
+    }
+  }
 }

libs/shared/src/lib/services/download/download.service.ts

@@ -32,6 +32,9 @@ const SNACKBAR_DURATION = 3000;
   providedIn: 'root',
 })
 export class DownloadService {
+  /** Save file timeout listener */
+  private saveFileTimeoutListener!: NodeJS.Timeout;
+
   /**
    * Shared download service. Handles export and upload events.
    * TODO: rename in file service
@@ -234,7 +237,10 @@ export class DownloadService {
     link.download = fileName;
     this.document.body.append(link);
     link.click();
-    setTimeout(() => link.remove(), 0);
+    if (this.saveFileTimeoutListener) {
+      clearTimeout(this.saveFileTimeoutListener);
+    }
+    this.saveFileTimeoutListener = setTimeout(() => link.remove(), 0);
   }
 
   /**

libs/shared/src/lib/services/editor/editor.service.ts

@@ -19,6 +19,8 @@ export class EditorService {
   private editorScrollListener!: any;
   /** Active item scroll listener */
   public activeItemScrollListener!: any;
+  /** Allow scrolling timeout listener */
+  private allowScrollingTimeoutListener!: NodeJS.Timeout;
   /** Renderer */
   private renderer!: Renderer2;
 
@@ -122,7 +124,10 @@ export class EditorService {
     if (this.editorScrollListener) {
       this.editorScrollListener();
     }
-    setTimeout(() => {
+    if (this.allowScrollingTimeoutListener) {
+      clearTimeout(this.allowScrollingTimeoutListener);
+    }
+    this.allowScrollingTimeoutListener = setTimeout(() => {
       const autoCompleterContainer =
         this.document.querySelector('.tox-tinymce-aux');
       if (!autoCompleterContainer) return;

libs/shared/src/lib/services/map/map-controls.service.ts

@@ -55,6 +55,8 @@ export class MapControlsService {
   private downloadControlClickListener!: any;
   /** Listener on download control wheel */
   private downloadControlWheelListener!: any;
+  /** Address marker timeout listener */
+  private addressMarkerTimeoutListener!: NodeJS.Timeout;
 
   /**
    * Shared map control service
@@ -185,11 +187,19 @@ export class MapControlsService {
                   <b>${'longitude: '}</b>${coordinates.lng}</p>`
             );
           circle.bindPopup(popup);
-          popup.on('remove', () => map.removeLayer(circle));
+          popup.on('remove', () => {
+            if (this.addressMarkerTimeoutListener) {
+              clearTimeout(this.addressMarkerTimeoutListener);
+            }
+            map.removeLayer(circle);
+          });
           circle.openPopup();
           // Use setTimeout to prevent the marker to be removed while
           // the map moves to the searched address and is re-centred
-          setTimeout(() => {
+          if (this.addressMarkerTimeoutListener) {
+            clearTimeout(this.addressMarkerTimeoutListener);
+          }
+          this.addressMarkerTimeoutListener = setTimeout(() => {
             this.addressMarker = circle;
           }, 1000);
         }

libs/shared/src/lib/services/map/map-polygons.service.ts

@@ -27,6 +27,8 @@ export class MapPolygonsService {
   private admin0sReady = new BehaviorSubject<boolean>(false);
   /** Admin0 polygons status as observable */
   public admin0sReady$ = this.admin0sReady.asObservable();
+  /** Map fit bounds timeout listener */
+  private fitBoundsTimeoutListener!: NodeJS.Timeout;
 
   /**
    * Shared map polygons service.
@@ -197,7 +199,10 @@ export class MapPolygonsService {
 
       if (geoJSON.features.length > 0) {
         // Timeout seems to be needed for first load of the map.
-        setTimeout(() => {
+        if (this.fitBoundsTimeoutListener) {
+          clearTimeout(this.fitBoundsTimeoutListener);
+        }
+        this.fitBoundsTimeoutListener = setTimeout(() => {
           map.fitBounds(L.geoJSON(geoJSON).getBounds());
         }, 500);
       }

libs/shared/src/lib/survey/components/resources.ts

@@ -130,6 +130,8 @@ export const init = (
     }
   };
 
+  /** Display as grid feature timeout listener */
+  let displayAsGridTimeoutListener!: NodeJS.Timeout;
   const component = {
     name: 'resources',
     title: 'Resources',
@@ -603,8 +605,11 @@ export const init = (
       // Display the add button | grid for resources question
       const actionsButtons = setUpActionsButtonWrapper();
       let gridComponentRef!: ComponentRef<CoreGridComponent>;
+      if (displayAsGridTimeoutListener) {
+        clearTimeout(displayAsGridTimeoutListener);
+      }
       // hide tagbox if grid view is enable
-      setTimeout(() => {
+      displayAsGridTimeoutListener = setTimeout(() => {
         if (question.displayAsGrid) {
           const element = el.parentElement?.querySelector('#tagbox');
           if (element) {