MOBILE-4081 core: Improve fa-icon dev performance

.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',

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');
-
+        this.validateIcon(this.name, src);
-        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`);
-            }
-        }
     }
 
     /**
@@ -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`);
+        });
+    }
+
 }