Refactor data fetching and state management in MapsPage

• Move data fetching logic from NetworkMap to MapsPage
• Handle loading and error states in MapsPage
• Remove loading and error handling from NetworkMap
• Ensure separation of concerns between data fetching and presentation

components/NetworkMap/NetworkMap.tsx

 import { NetworkTopologyData } from '@/types/types';
-import {
-  EuiToolTip,
-  EuiSelect,
-  EuiLoadingSpinner,
-  EuiPanel,
-  EuiFormRow,
-} from '@elastic/eui';
+import { EuiToolTip, EuiSelect, EuiPanel, EuiFormRow } from '@elastic/eui';
 import cytoscape, { ElementDefinition, Core } from 'cytoscape';
 import fcose from 'cytoscape-fcose';
 import React, { useEffect, useState, useRef } from 'react';
@@ -26,7 +20,6 @@ interface FcoseLayoutOptions {
 const NetworkMap: React.FC<NetworkMapProps> = ({ data }) => {
   const [elements, setElements] = useState<ElementDefinition[]>([]);
   const [labelType, setLabelType] = useState('iptrunkIsisMetric');
-  const [loading, setLoading] = useState(true);
   const [tooltipContent, setTooltipContent] = useState<JSX.Element | null>(
     null,
   );
@@ -40,7 +33,6 @@ const NetworkMap: React.FC<NetworkMapProps> = ({ data }) => {
     if (data) {
       const transformedElements = transformDataToElements(data);
       setElements(transformedElements);
-      setLoading(false);
     }
   }, [data]);
 
@@ -295,11 +287,7 @@ const NetworkMap: React.FC<NetworkMapProps> = ({ data }) => {
 
   return (
     <EuiPanel>
-      {loading ? (
-        <EuiLoadingSpinner size="xl" />
-      ) : (
-        <div id="container" style={{ height: '80vh', marginTop: '20px' }}></div>
-      )}
+      <div id="container" style={{ height: '80vh', marginTop: '20px' }}></div>
       {tooltipContent && tooltipPosition && (
         <div
           style={{