updates on the console under the dispatch page active section

src/pages/nearle/dispatch/ActiveSection.js

@@ -8,6 +8,7 @@ import {
   MdInventory2
 } from 'react-icons/md';
 import dayjs from 'dayjs';
+import { CircularProgress } from '@mui/material';
 import { getStatusStyle, getActiveOrder } from './dispatchShared';
 import { OpenToast } from 'components/third-party/OpenToast';
 
@@ -19,15 +20,16 @@ const ActiveSection = ({
   setFocusedStop,
   calculateEstMeters,
   getRiderColor,
-  formatMeters
+  formatMeters,
+  isLoading
 }) => {
   // Sort by live distance ascending (closest drop-off first; null/unknown last)
   const activeDeliveries = visibleRiders
     .map((r) => getActiveOrder(r.orders))
     .filter(Boolean)
     .sort((a, b) => {
-      const mA = calculateEstMeters(a.rider_id, a) ?? Infinity;
-      const mB = calculateEstMeters(b.rider_id, b) ?? Infinity;
+      const mA = calculateEstMeters(a.rider_id || a.userid, a) ?? Infinity;
+      const mB = calculateEstMeters(b.rider_id || b.userid, b) ?? Infinity;
       return mA - mB;
     });
 
@@ -71,6 +73,15 @@ const ActiveSection = ({
     prevStatusMapRef.current = currentMap;
   }, [visibleRiders]);
 
+  if (isLoading) {
+    return (
+      <div className="empty-slot" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', minHeight: '200px' }}>
+        <CircularProgress size={30} style={{ color: '#7b1fa2', marginBottom: '16px' }} />
+        <div className="empty-slot-title">Loading active deliveries...</div>
+      </div>
+    );
+  }
+
   if (activeDeliveries.length === 0) {
     return (
       <div className="empty-slot">
@@ -86,7 +97,7 @@ const ActiveSection = ({
   }
 
   const renderActiveDeliveryCard = (o, i) => {
-    const rid = o.rider_id;
+    const rid = o.rider_id || o.userid;
     const rider = riders.find((r) => String(r.id) === String(rid));
     const color = getRiderColor(rid);
     const statusStyle = getStatusStyle(o.orderstatus);
@@ -111,7 +122,7 @@ const ActiveSection = ({
       <div
         key={o.orderid}
         className={`adcard${isActive ? ' is-active' : ''}`}
-        style={{ '--ad-accent': color, animationDelay: `${i * 0.05}s` }}
+        style={{ '--ad-accent': color }}
         onClick={() => {
           if (rider) handleRiderFocus(rider);
           if (canFocus) setFocusedStop({ orderid: o.orderid, lat, lon });