loading state hadnling

frontend/src/components/ExportModal.tsx

@@ -13,7 +13,6 @@ interface ExportModalProps {
   droneImagesCount: number;
   isLoading?: boolean;
   exportSuccess?: boolean;
-  isPageLoading?: boolean;
   variant?: 'bulk' | 'single';
   onNavigateToList?: () => void;
   onNavigateAndExport?: () => void;
@@ -27,7 +26,6 @@ export default function ExportModal({
   droneImagesCount,
   isLoading = false,
   exportSuccess = false,
-  isPageLoading = false,
   variant = 'bulk',
   onNavigateAndExport
 }: ExportModalProps) {
@@ -69,22 +67,6 @@ export default function ExportModal({
     return (
       <div className={styles.fullSizeModalOverlay} onClick={handleClose}>
         <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
-          {isPageLoading && (
-            <div className={styles.loadingOverlay}>
-              <div className="flex flex-col items-center gap-4">
-                <Spinner className="text-ifrcRed" />
-                <div className="flex flex-col items-center gap-4 mt-4">
-                  <Button
-                    name="cancel-page-loading"
-                    variant="tertiary"
-                    onClick={handleClose}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
           {isLoading && (
             <div className={styles.loadingOverlay}>
               <div className="flex flex-col items-center gap-4">
@@ -161,22 +143,6 @@ export default function ExportModal({
   return (
     <div className={styles.fullSizeModalOverlay} onClick={handleClose}>
       <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
-        {isPageLoading && (
-          <div className={styles.loadingOverlay}>
-            <div className="flex flex-col items-center gap-4">
-              <Spinner className="text-ifrcRed" />
-              <div className="flex flex-col items-center gap-4 mt-4">
-                <Button
-                  name="cancel-page-loading"
-                  variant="tertiary"
-                  onClick={handleClose}
-                >
-                  Cancel
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
         {isLoading && (
           <div className={styles.loadingOverlay}>
             <div className="flex flex-col items-center gap-4">

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -480,39 +480,47 @@ export default function ExplorePage() {
 
   return (
     <PageContainer>
-      <div className="max-w-7xl mx-auto">
-        <div className={styles.tabSelector}>
-          <SegmentInput
-            name="explore-view"
-            value={view}
-            onChange={(value) => {
-              if (value === 'explore' || value === 'mapDetails') {
-                setView(value);
-                if (value === 'mapDetails' && captions.length > 0) {
-                  if (captions[0]?.image_id && captions[0].image_id !== 'undefined' && captions[0].image_id !== 'null') {
-                  navigate(`/map/${captions[0].image_id}`);
-                } else {
-                  console.error('Invalid image_id for navigation:', captions[0]?.image_id);
-                }
-                }
-              }
-            }}
-            options={viewOptions}
-            keySelector={(o) => o.key}
-            labelSelector={(o) => o.label}
-          />
-          
-          {/* Export Dataset Button */}
-          <Button
-            name="export-dataset"
-            variant="secondary"
-            onClick={() => setShowExportModal(true)}
-          >
-            Export
-          </Button>
+      {isLoadingContent ? (
+        <div className="flex flex-col items-center justify-center min-h-[60vh]">
+          <div className="flex flex-col items-center gap-4">
+            <Spinner className="text-ifrcRed" />
+            <div>Loading examples...</div>
+          </div>
         </div>
+      ) : (
+        <div className="max-w-7xl mx-auto">
+          <div className={styles.tabSelector}>
+            <SegmentInput
+              name="explore-view"
+              value={view}
+              onChange={(value) => {
+                if (value === 'explore' || value === 'mapDetails') {
+                  setView(value);
+                  if (value === 'mapDetails' && captions.length > 0) {
+                    if (captions[0]?.image_id && captions[0].image_id !== 'undefined' && captions[0].image_id !== 'null') {
+                    navigate(`/map/${captions[0].image_id}`);
+                  } else {
+                    console.error('Invalid image_id for navigation:', captions[0]?.image_id);
+                  }
+                  }
+                }
+              }}
+              options={viewOptions}
+              keySelector={(o) => o.key}
+              labelSelector={(o) => o.label}
+            />
+            
+            {/* Export Dataset Button */}
+            <Button
+              name="export-dataset"
+              variant="secondary"
+              onClick={() => setShowExportModal(true)}
+            >
+              Export
+            </Button>
+          </div>
 
-        {view === 'explore' ? (
+          {view === 'explore' ? (
           <div className="space-y-6">
             {/* Search and Filters */}
             <div className="mb-6 space-y-4">
@@ -647,6 +655,7 @@ export default function ExplorePage() {
           </div>
         )}
       </div>
+      )}
 
       {/* Export Selection Modal */}
       <ExportModal
@@ -667,7 +676,6 @@ export default function ExplorePage() {
         droneImagesCount={filtered.filter(img => img.image_type === 'drone_image').length}
         isLoading={isExporting}
         exportSuccess={exportSuccess}
-        isPageLoading={isLoadingContent}
       />
     </PageContainer>
   );

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -1390,7 +1390,6 @@ export default function MapDetailPage() {
           droneImagesCount={map.image_type === 'drone_image' ? 1 : 0}
           isLoading={isExporting}
           exportSuccess={exportSuccess}
-          isPageLoading={loading}
           variant="single"
           onNavigateToList={() => {
             setShowExportModal(false);