fix: [map chart widget] create unique instance of map loader per widget to avoi… (#31822)

…d cross cancelling loader calls

## Description
Create an instance of map loader per widget to avoid one widget
cancelling calls of another widget.


Fixes https://github.com/appsmithorg/appsmith/issues/31819
## Automation

/ok-to-test tags="@tag.Maps"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]  
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8292557044>
> Commit: `cd13c989d8b911a064629bf1d8c683e09927d3b2`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8292557044&attempt=1"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉

<!-- end of auto-generated comment: Cypress test results  -->










<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced the Map Widget to load maps more efficiently with the
introduction of `loadMapGenerator`.
- **Tests**
- Added Cypress tests to ensure the Map Widget loads correctly on the
canvas.
- **Refactor**
- Updated the Map Widget loading process for better performance and
flexibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts

@@ -0,0 +1,23 @@
+/// <reference types="Cypress" />
+import {
+  agHelper,
+  entityExplorer,
+  draggableWidgets,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  "Map chart Widget",
+  { tags: ["@tag.Widget", "@tag.Maps"] },
+  function () {
+    it("1.Drag two Map Widget and Verify the Map Widget is loading", () => {
+      //Add map and verify
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 200, 200);
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 600, 200);
+      agHelper.RefreshPage();
+      agHelper.AssertElementLength(
+        ".t--draggable-mapchartwidget svg text:contains('Global Population')",
+        2,
+      );
+    });
+  },
+);

app/client/src/widgets/MapChartWidget/component/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import type { MapColorObject, MapTypes } from "../constants";
 import type { MapData } from "./types";
-import { getChartOption, loadMap } from "./utilities";
+import { getChartOption, loadMapGenerator } from "./utilities";
 import * as echarts from "echarts";
 import countryDetails from "./countryDetails";
 import clsx from "clsx";
@@ -27,6 +27,8 @@ const MapChartContainer = styled.div<{
 export default function EchartComponent(props: MapChartComponentProps) {
   const [isLoading, setIsLoading] = useState(false);
 
+  const loadMap = useMemo(loadMapGenerator, []);
+
   const [key, setKey] = useState(0);
 
   const { caption, colorRange, data, onDataPointClick, showLabels, type } =

app/client/src/widgets/MapChartWidget/component/utilities.ts

@@ -43,7 +43,7 @@ export function getSpecialAreas(map: MapTypes): GeoSpecialAreas {
 /*
  * Function to load the map geojson file and register it with echarts
  */
-export const loadMap = (() => {
+export const loadMapGenerator = () => {
   let abortController: AbortController | null = null;
 
   return async (type: MapTypes) => {
@@ -85,7 +85,7 @@ export const loadMap = (() => {
       return Promise.resolve();
     }
   };
-})();
+};
 
 function getProjection(type: string) {
   switch (type) {