From dba43ddaf458c906a692153ea2380e55a43381e2 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Tue, 29 Nov 2022 11:38:16 +0100
Subject: [PATCH] MOBILE-4081 core: Improve fa-icon dev performance

---
 .eslintrc.js                   | 14 ++++++++++--
 src/core/directives/fa-icon.ts | 42 +++++++++++++++++++++++++++-------
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 865090c04..c2255aea6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -103,12 +103,22 @@ const appConfig = {
             'error',
             {
                 selector: 'property',
-                modifiers: ['readonly'],
+                format: ['camelCase'],
+            },
+            {
+                selector: 'property',
+                modifiers: ['public', 'readonly'],
                 format: ['UPPER_CASE'],
             },
             {
                 selector: 'property',
-                format: ['camelCase'],
+                modifiers: ['protected', 'readonly'],
+                format: ['UPPER_CASE'],
+            },
+            {
+                selector: 'property',
+                modifiers: ['private', 'readonly'],
+                format: ['UPPER_CASE'],
             },
             {
                 selector: 'property',
diff --git a/src/core/directives/fa-icon.ts b/src/core/directives/fa-icon.ts
index 9de2de27a..52e43b217 100644
--- a/src/core/directives/fa-icon.ts
+++ b/src/core/directives/fa-icon.ts
@@ -30,6 +30,11 @@ import { CoreConstants } from '@/core/constants';
 })
 export class CoreFaIconDirective implements AfterViewInit, OnChanges {
 
+    /**
+     * Object used to store whether icons exist or not during development.
+     */
+    private static readonly DEV_ICONS_STATUS: Record<string, Promise<boolean>> = {};
+
     @Input() name = '';
 
     protected element: HTMLElement;
@@ -89,14 +94,7 @@ export class CoreFaIconDirective implements AfterViewInit, OnChanges {
         const src = `assets/fonts/${font}/${library}/${iconName}.svg`;
         this.element.setAttribute('src', src);
         this.element.classList.add('faicon');
-
-        if (CoreConstants.BUILD.isDevelopment || CoreConstants.BUILD.isTesting) {
-            try {
-                await Http.get(src, { responseType: 'text' }).toPromise();
-            } catch (error) {
-                this.logger.error(`Icon ${this.name} not found`);
-            }
-        }
+        this.validateIcon(this.name, src);
     }
 
     /**
@@ -123,4 +121,32 @@ export class CoreFaIconDirective implements AfterViewInit, OnChanges {
         this.setIcon();
     }
 
+    /**
+     * Validate that an icon exists, or show warning otherwise (only in development and testing environments).
+     *
+     * @param name Icon name.
+     * @param src Icon source url.
+     */
+    private validateIcon(name: string, src: string): void {
+        if (!CoreConstants.BUILD.isDevelopment && !CoreConstants.BUILD.isTesting) {
+            return;
+        }
+
+        if (!(src in CoreFaIconDirective.DEV_ICONS_STATUS)) {
+            CoreFaIconDirective.DEV_ICONS_STATUS[src] = Http.get(src, { responseType: 'text' })
+                .toPromise()
+                .then(() => true)
+                .catch(() => false);
+        }
+
+        // eslint-disable-next-line promise/catch-or-return
+        CoreFaIconDirective.DEV_ICONS_STATUS[src].then(exists => {
+            if (exists) {
+                return;
+            }
+
+            return this.logger.error(`Icon ${name} not found`);
+        });
+    }
+
 }