I have an angular 10 project. One of the pages uses fontawesome icon which has over 1000 records. With these icons, the page load is very slow. I tried removing icons and the page is faster.
I'm using fontawesome-free": "^5.15.1".
Does anyone have any suggestions to overcome this issue in Angular 10?
Below is the part of the page and it has a down-arrow icon. That is the issue. If I replace this icon with a character like #, the page load is very fast. I have over 1000 rows.
Here is the ngFor generating the HTML.
<ng-container *ngFor="let mjob of mst.jobs; index as y">
<table>
<tr>
<td class="p-0 nowrap">
<div class="dropdown">
<a role="button" id="btnDropdownDemo"
class="font-weight-bold"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
title="{{mjob.jobStatus}}"
[style.color]="mjob.jobStatusColor">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-left font-size-8pt p-1">
<div class="dropdown-item d-flex justify-content-around" *ngIf="mjob.tripTypeId == manifestItemRefType.PickupJob || mjob.tripTypeId == manifestItemRefType.DelJob">
<a role="button" class="font-size-11pt"
(click)="onConnotePrintClick(mjob.jobId)" title="Print Connote">
<i class="far fa-file-powerpoint"></i>
</a>
<a role="button" class="font-size-11pt"
(click)="onConnoteLabelPrintClick(mjob.jobId)" title="Print Label">
<i class="fas fa-tag"></i>
</a>
<a role="button" class="font-size-11pt"
(click)="onCorrespondencePopupOpen(mjob.jobId,mjob.jobReference)" title="Correspondence"
*ngIf="helper.right(userFunctionRights.jobs_Connote_Edit)">
<i class="far fa-comment-dots"></i>
</a>
</div>
</div>
</div>
</td>
<td class="p-0 nowrap">
<span style="color: #B23CFD;"> </span>
<span title="{{getTripTypeStrV2(mjob.tripTypeId)}}" style="cursor:default;">{{getTripTypeStr(mjob.tripTypeId)}}</span>
<span style="color: #B23CFD;"> | </span>
<span>{{mjob.jobReference}}</span>
<span style="color: #B23CFD;"> | </span>
<span title="Pick-up Date">{{mjob.plannedPudateTime | date: 'dd/MM/yyyy'}}</span>
<span style="color: #B23CFD;"> | </span>
<span title="Receiver Name">{{mjob.receiverName}}</span>
<span style="color: #B23CFD;"> | </span>
<span title="Receiver Town">{{mjob.receiverTownName}}</span>
</td>
</tr>
</table>
</ng-container>
The issue is with the below line. when I remove it, the page load is fatter.
<i class="fas fa-chevron-circle-down"></i>
Font awesome is added to package.json file
"devDependencies": {
"@angular-devkit/build-angular": "^0.1002.0",
"@angular/cli": "~10.2.0",
"@angular/compiler-cli": "~10.2.0",
"@angular/language-service": "~10.2.0",
"@fortawesome/fontawesome-free": "^5.15.1",
below is the screenshot of the Network tab. I hope Font Awesome file is the "fa-solid-900.3ceb50e7bcafb577367c.woff2" which is in disk cache.
//EDIT - 16/06/2022
I have removed all Font Awesome icons and changed the HTML as below. Now it is much faster. But still, I want to keep the icon which makes look nice. With this tryout, it is clear the issue is with icon loading.
<table>
<tr>
<td class="p-0 nowrap">
<div class="dropdown">
<a role="button" id="btnDropdownDemo"
class="font-weight-bold"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
title="{{mjob.jobStatus}}"
[style.color]="mjob.jobStatusColor">
<span class="badge" [style.background-color]="mjob.jobStatusColor">#</span>
</a>
<div class="dropdown-menu dropdown-menu-left font-size-8pt p-1">
<a role="button"
(click)="onJobPopupOpen(jobPropertyModalPopup,8,mjob.jobId,mjob.jobReference)"
class="dropdown-item text-warning"
*ngIf="helper.right(userFunctionRights.jobs_Connote_Edit)">Change Status</a>
<div class="dropdown-divider" *ngIf="helper.right(userFunctionRights.jobs_Connote_Edit)"></div>
<a role="button"
(click)="onJobRemove(mjob.manifestItemId,mjob.jobReference,mjob.manifestId)"
class="dropdown-item text-danger"
*ngIf="helper.right(userFunctionRights.carrier_Manifest_Edit)">Remove Job</a>
<div class="dropdown-divider" *ngIf="helper.right(userFunctionRights.carrier_Manifest_Edit)"></div>
<a [routerLink]="['/job', mjob.jobId, { type: jobType.Connote }]"
class="dropdown-item font-size-8pt text-info" target="_blank">Open Connote</a>
<div class="dropdown-divider"></div>
<a role="button"
(click)="onJobPopupOpen(jobPropertyModalPopup,6,mjob.jobId,mjob.jobReference)"
class="dropdown-item">Driver Tracking</a>
<div class="dropdown-divider"></div>
<a role="button"
(click)="onJobPopupOpen(jobPropertyModalPopup,1,mjob.jobId,mjob.jobReference)"
class="dropdown-item text-success">Connote Actuals</a>
<div class="dropdown-divider"></div>
<a role="button"
(click)="onJobPopupOpen(jobPropertyModalPopup,7,mjob.jobId,mjob.jobReference)"
class="dropdown-item text-info">Job Item Scan</a>
<div class="dropdown-divider"></div>
<a role="button"
(click)="onJobPopupOpen(jobPropertyModalPopup,2,mjob.jobId,mjob.jobReference)"
class="dropdown-item">Connote Property</a>
<div class="dropdown-divider"></div>
<a role="button"
(click)="onJobPopupOpen(null,10,mjob.jobId,mjob.jobReference)"
class="dropdown-item">Upload Documents</a>
</div>
</div>
</td>
<td class="p-0 nowrap">
<span style="color: #B23CFD;"> </span>
<span title="{{getTripTypeStrV2(mjob.tripTypeId)}}" style="cursor:default;">{{getTripTypeStr(mjob.tripTypeId)}}</span>
<span style="color: #B23CFD;"> | </span>
<span>{{mjob.jobReference}}</span>
<span style="color: #B23CFD;"> | </span>
<span title="Pick-up Date">{{mjob.plannedPudateTime | date: 'dd/MM/yyyy'}}</span>
<span style="color: #B23CFD;"> | </span>
<span title="Receiver Name">{{mjob.receiverName}}</span>
<span style="color: #B23CFD;"> | </span>
<span title="Receiver Town">{{mjob.receiverTownName}}</span>
</td>
</tr>
</table>
</ng-container>```