Why does my Angular 9 sort routine work great when using Google Chrome (Ch131) browser, but works poorly (gets Wait msg) when using MS Edge (Ch131)?

Question

I'm still on Windows 10 but I have all Windows 10 updates installed. I have gone through Settings and Repaired/Modified my MS Edge install to latest version, so all that should be good.

My Component code is:

 columnSort(colName: string): void {
   if (this.sortedAsc) {   // sorts in ascending order
     this.sortedAsc = false;
     this.members =
       this.members.sort((m1, m2) => {
         return m1[colName].toLowerCase() < m2[colName].toLowerCase() ? -1 :
           (m1[colName].toLowerCase() > m2[colName].toLowerCase() ? 1 : 0);
       });
   } else {  // sorts in descending order
     this.sortedAsc = true;
     this.members =
       this.members.sort((m1, m2) => {
         return m1[colName].toLowerCase() > m2[colName].toLowerCase() ? -1 :
           (m1[colName].toLowerCase() < m2[colName].toLowerCase() ? 1 : 0);
       });
}

}

HTML Template Code:

  <th class="freezecol3 fixed-header" (click)="columnSort('last_Name')">Last Name &uarr;&darr;</th>
  <th class="freezecol4 fixed-header" (click)="columnSort('first_Name')">First Name &uarr;&darr;</th>

F12 Developer Tools in Edge and Chrome show Request headers like:

  sec-ch-ua: "Microsoft Edge";v="131", "Chromium";v="131", "Not_A Brand";v="24"
  sec-ch-ua-mobile: ?0
  sec-ch-ua-platform: "Windows"
  sec-fetch-dest: empty
  sec-fetch-mode: cors
  sec-fetch-site: same-origin
  user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Edge browser gets "This page isn't responding" message (after 10 to 15 seconds) when column is clicked for sorting. When I click "Wait", the sort takes about 30 seconds in MS Edge. In Chrome & Safari, there is no error condition, and the sort is complete in 2 to 3 seconds.

Updated 01/30/2025: I uninstalled an SQLite DBBrowser app and the sort started working correctly while using MS Edge, but I also queried CoPilot and built a new sort routine as an Angular TypeScript Injectable service, with one public and one private method, to replace the TypeScript default sort() for arrays - like this:

   import { Injectable } from "@angular/core";
   import { Member } from "../model/member.model";

   @Injectable()
    export class BinarySortService {


      member: Member = new Member();
      members: Member[] = new Array<Member>();

      constructor() { }

      binarySearch(arr: Member[], item: Member, low: number, high: number, comparator: (a: Member, b: Member) => number): number {
        if (high <= low) {
          return (comparator(item, arr[low]) > 0) ? (low + 1) : low;
        }

        const mid = Math.floor((low + high) / 2);

        if (comparator(item, arr[mid]) === 0) {
          return mid + 1;
        }

        if (comparator(item, arr[mid]) > 0) {
          return this.binarySearch(arr, item, mid + 1, high, comparator);
        }

        return this.binarySearch(arr, item, low, mid - 1, comparator);
      }

    public binaryInsertionSort(arr: Member[], columnName: string, sortOrder: 'asc' | 'desc'): void {
      const comparator = sortOrder === 'asc'
          ? (a: Member, b: Member) => a[columnName].localeCompare(b[columnName]) 
          : (a: Member, b: Member) => b[columnName].localeCompare(a[columnName]);  

      for (let i = 1; i < arr.length; i++) {
          const key = arr[i];
          const position = this.binarySearch(arr, key, 0, i - 1, comparator);

          // Shift all elements from the position to the right
          let j = i - 1;
          while (j >= position) {
            arr[j + 1] = arr[j];
            j--;
          }
          arr[j + 1] = key;
        }
      }
    }
  

The new sort routine is called by the component with this method below which uses the original method name and parameter:

   // 2025.01.30: new sorting method, binary-insertion.
   columnSort(colName: string): void {
     if (this.sortedAsc) {
       this.bsrt.binaryInsertionSort(this.members, colName, 'asc');
       this.sortedAsc = false;
     }
     else {
       this.bsrt.binaryInsertionSort(this.members, colName, 'desc');
       this.sortedAsc = true;
     }
   }

It's hard to tell if this new binary & insertion sort method works more efficiently or faster than the original, but it does work! Thanks to all who commented and answered.

Answer 1

If you have extensions installed on Microsoft Edge, you can try disabling them for a test. Sometimes extensions can cause hang issues.

Also, you can try toggling a particular setting called Use graphics acceleration when available at edge://settings/system, which has something to do with Edge performance.