@nerdjs/sales-kit 4.0.56 → 4.0.57

package/dist/entities/quote/quote.d.ts

@@ -21,7 +21,8 @@ export type Stop_Entity = {
     accessorialIds: number[];
     date?: string;
     locationId?: number;
-    key: number;
+    id: number;
+    placeId?: string;
 };
 export type Reefer_Entity = {
     reeferTemp?: string;

package/dist/helpers.d.ts

@@ -16,3 +16,12 @@ export declare function mapToArray<T extends {
 }>(elements: {
     [key: number]: T;
 }): Array<T>;
+export declare function getCache(key: string): google.maps.places.AutocompleteSuggestion[] | null;
+export declare function setCache(key: string, data: google.maps.places.AutocompleteSuggestion[]): void;
+/**
+ * NEW: canonical cache by placeId (recommended)
+ */
+export declare function getCacheByPlaceId(placeId?: string): google.maps.places.AutocompleteSuggestion[] | null;
+export declare function useGoogleMapsAutocompleteCache(): {
+    getSuggestions: (request: google.maps.places.AutocompleteRequest) => Promise<google.maps.places.AutocompleteSuggestion[]>;
+};

package/dist/helpers.js

@@ -26,4 +26,58 @@ export function mapToArray(elements) {
     }
     return ret;
 }
+import { useCallback } from "react";
+const CACHE = new Map();
+const TTL = 1000 * 60 * 60; // 1 hour
+const normalize = (v) => v.trim().toLowerCase();
+export function getCache(key) {
+    const k = normalize(key);
+    const entry = CACHE.get(k);
+    if (!entry)
+        return null;
+    if (Date.now() - entry.time > TTL) {
+        CACHE.delete(k);
+        return null;
+    }
+    return entry.data;
+}
+export function setCache(key, data) {
+    const k = normalize(key);
+    const primaryPlaceId = data?.[0]?.placePrediction?.placeId || undefined;
+    CACHE.set(k, {
+        data,
+        placeId: primaryPlaceId,
+        time: Date.now(),
+    });
+}
+/**
+ * NEW: canonical cache by placeId (recommended)
+ */
+export function getCacheByPlaceId(placeId) {
+    if (!placeId)
+        return null;
+    for (const entry of CACHE.values()) {
+        if (entry.placeId === placeId) {
+            if (Date.now() - entry.time > TTL)
+                return null;
+            return entry.data;
+        }
+    }
+    return null;
+}
+export function useGoogleMapsAutocompleteCache() {
+    const fetchAutocompleteSuggestions = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions;
+    const getSuggestions = useCallback(async (request) => {
+        const input = request.input;
+        if (!input)
+            return [];
+        const cached = getCache(input);
+        if (cached)
+            return cached;
+        const { suggestions } = await fetchAutocompleteSuggestions(request);
+        setCache(input, suggestions);
+        return suggestions;
+    }, []);
+    return { getSuggestions };
+}
 //# sourceMappingURL=helpers.js.map

package/dist/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,UAAU,CACxB,QAAkB;IAElB,MAAM,GAAG,GAAuB,EAAE,CAAC;IACnC,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC3B,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC;YACxD,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC9B,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC;QAC5B,CAAC;IACH,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,UAAU,CAA2B,QAEpD;IACC,MAAM,GAAG,GAAG,IAAI,KAAK,EAAK,CAAC;IAC3B,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC3B,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC;YACxD,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC9B,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpB,CAAC;IACH,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"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"}

package/dist/hooks/lep/lepLoadLocation.d.ts

@@ -1,9 +1,3 @@
-/**
- *
- * @param root0
- * @param root0.mapID
- * @param root0.refetchOnMountOrArgChange
- */
 export declare function LepLoadLocation({ mapID, refetchOnMountOrArgChange, }: {
     mapID?: string;
     refetchOnMountOrArgChange?: number | boolean;

package/dist/hooks/lep/lepLoadLocation.js

@@ -11,168 +11,201 @@ import { TripPanel } from "../load";
 import { SOURCES } from "../load/loadLastLocation";
 import { LoadIDContext } from "./index";
 import { NerdMap } from "./nerdMap/nerdMap";
-/**
- *
- * @param root0
- * @param root0.mapID
- * @param root0.refetchOnMountOrArgChange
- */
 export function LepLoadLocation({ mapID, refetchOnMountOrArgChange, }) {
     const mapRef = useRef(null);
+    const markersRef = useRef([]);
+    const polylinesRef = useRef([]);
+    const infoWindowRef = useRef(new window.google.maps.InfoWindow());
     const [selectedTrip, setSelectedTrip] = useState(null);
-    const [zoom, setZoom] = useState(5);
-    const [center, setCenter] = useState(new google.maps.LatLng({
+    const zoomRef = useRef(5);
+    const centerRef = useRef(new google.maps.LatLng({
         lat: 39.8097343,
         lng: -98.5556199,
     }));
     const { id } = useContext(LoadIDContext);
-    const params = useMemo(() => ({
+    const positionsParams = useMemo(() => ({
         filters: JSON.stringify([
-            { name: "positions.loadID", comparison: "eq", value: id },
+            {
+                name: "positions.loadID",
+                comparison: "eq",
+                value: id,
+            },
         ]),
         sorter: JSON.stringify([
-            { name: "positions.transactionTimeUTC", asc: false },
+            {
+                name: "positions.transactionTimeUTC",
+                asc: false,
+            },
         ]),
     }), [id]);
-    useGetPositionsQuery(params);
-    const selectAllPositions = useMemo(() => getPositionsSelectors(params).selectAll, [params]);
+    const { isLoading: positionsLoading } = useGetPositionsQuery(positionsParams);
+    const selectAllPositions = useMemo(() => getPositionsSelectors(positionsParams).selectAll, [positionsParams]);
     const positions = useSelector(selectAllPositions);
-    const params2 = useMemo(() => ({
+    const shipconsParams = useMemo(() => ({
         filters: JSON.stringify([
-            { name: "ship_cons.load_id", comparison: "eq", value: id },
+            {
+                name: "ship_cons.load_id",
+                comparison: "eq",
+                value: id,
+            },
+        ]),
+        sorter: JSON.stringify([
+            {
+                name: "ship_cons.stop_number",
+                asc: true,
+            },
         ]),
-        sorter: JSON.stringify([{ name: "ship_cons.stop_number", asc: true }]),
     }), [id]);
-    useGetShipconsQuery(params2, {
+    useGetShipconsQuery(shipconsParams, {
         skip: Number.isNaN(Number(id)),
         refetchOnMountOrArgChange,
     });
-    const selectAllShipcons = useMemo(() => getShipconsSelectors(params2).selectAll, [params2]);
+    const selectAllShipcons = useMemo(() => getShipconsSelectors(shipconsParams).selectAll, [shipconsParams]);
     const shipcons = useSelector(selectAllShipcons);
-    const tripIDs = useMemo(() => [...new Set(shipcons.map((s) => s.appointmentTripID))], [shipcons]);
+    const tripIDs = useMemo(() => [
+        ...new Set(shipcons.map((s) => s.appointmentTripID).filter(Boolean)),
+    ], [shipcons]);
     const [getAppointmentTrip] = useLazyGetAppointmentTripQuery();
     const [appointmentTrips, setAppointmentTrips] = useState([]);
-    const getTrips = async (tripIDs) => {
-        const trips = [];
-        for (let i = 0; i < tripIDs.length; i++) {
-            const id = tripIDs[i];
-            if (id)
-                await getAppointmentTrip(id)
-                    .unwrap()
-                    .then((r) => trips.push(r))
-                    .catch(() => {
-                    return;
-                });
-        }
-        setAppointmentTrips(trips);
+    const latestTripsRequestRef = useRef(0);
+    const clearMapObjects = () => {
+        markersRef.current.forEach((marker) => {
+            marker.map = null;
+        });
+        polylinesRef.current.forEach((polyline) => {
+            polyline.setMap(null);
+        });
+        markersRef.current = [];
+        polylinesRef.current = [];
     };
     useEffect(() => {
-        getTrips(tripIDs);
+        const loadTrips = async () => {
+            if (tripIDs.length === 0) {
+                setAppointmentTrips([]);
+                return;
+            }
+            const requestId = Date.now();
+            latestTripsRequestRef.current = requestId;
+            const results = await Promise.all(tripIDs.map((tripID) => getAppointmentTrip(Number(tripID))
+                .unwrap()
+                .catch(() => null)));
+            if (latestTripsRequestRef.current !== requestId) {
+                return;
+            }
+            setAppointmentTrips(results.filter(Boolean));
+        };
+        loadTrips();
     }, [tripIDs]);
     useEffect(() => {
+        if (!mapRef.current) {
+            return;
+        }
+        clearMapObjects();
         const loadpath = [];
-        positions?.forEach((position, i) => {
-            if (position.latitude && position.longitude && i !== 531) {
-                loadpath.push(new google.maps.LatLng(Number(position.latitude), Number(position.longitude)));
-                const pin = new google.maps.marker.PinElement({
-                    background: "#00000000",
-                    borderColor: "#00000000",
-                    glyphColor: "#00000000",
-                    glyph: "",
-                });
-                const newLoadMarker = new google.maps.marker.AdvancedMarkerElement({
-                    position: new google.maps.LatLng(Number(position.latitude), Number(position.longitude)),
-                    content: pin.element,
-                    map: mapRef.current,
-                });
-                let date = "Date missing";
-                if (position.transactionTimeUTC) {
-                    date = DateTime.fromFormat(position.transactionTimeUTC, "yyyy-LL-dd HH:mm:ss").toFormat("LLL dd HH:mm:ss");
-                }
-                const infoWindow = new window.google.maps.InfoWindow({
-                    content: `<div style="display: flex; flex-direction: column; color: black;">` +
-                        `<label style="text-align: center; font-weight: bold; margin-bottom: 5px">${position.city}, ${position.state}</label>` +
-                        `<label style="text-align: center; margin-bottom: 5px" >${date}</label>` +
-                        `<label style="text-align: center" >${position.reporter}</label>` +
-                        `</div>`,
-                    headerDisabled: true,
-                });
-                newLoadMarker.addListener("click", () => {
-                    //Dummy function used to enable mouseEvent on markers
-                });
-                newLoadMarker.addEventListener("mouseenter", () => {
-                    infoWindow.open({
-                        anchor: newLoadMarker,
-                    });
-                });
-                newLoadMarker.addEventListener("mouseleave", () => {
-                    infoWindow.close();
-                });
+        positions.forEach((position, i) => {
+            if (!position.latitude || !position.longitude || i === 531) {
+                return;
+            }
+            const latLng = new google.maps.LatLng(Number(position.latitude), Number(position.longitude));
+            loadpath.push(latLng);
+            const pin = new google.maps.marker.PinElement({
+                background: "#00000000",
+                borderColor: "#00000000",
+                glyphColor: "#00000000",
+                glyphText: "",
+            });
+            const marker = new google.maps.marker.AdvancedMarkerElement({
+                position: latLng,
+                content: pin,
+                map: mapRef.current,
+            });
+            markersRef.current.push(marker);
+            let date = "Date missing";
+            if (position.transactionTimeUTC) {
+                date = DateTime.fromFormat(position.transactionTimeUTC, "yyyy-LL-dd HH:mm:ss").toFormat("LLL dd HH:mm:ss");
             }
+            const content = `<div style="display:flex;flex-direction:column;color:black;">` +
+                `<label style="text-align:center;font-weight:bold;margin-bottom:5px">${position.city}, ${position.state}</label>` +
+                `<label style="text-align:center;margin-bottom:5px">${date}</label>` +
+                `<label style="text-align:center">${position.reporter}</label>` +
+                `</div>`;
+            marker.addEventListener("mouseenter", () => {
+                infoWindowRef.current.setContent(content);
+                infoWindowRef.current.open({
+                    anchor: marker,
+                });
+            });
+            marker.addEventListener("mouseleave", () => {
+                infoWindowRef.current.close();
+            });
         });
         if (loadpath.length > 1) {
-            const tempPolyline = new google.maps.Polyline({
+            const polyline = new google.maps.Polyline({
                 path: loadpath,
                 strokeColor: "#b71c1c",
                 strokeWeight: 6,
                 visible: true,
             });
-            tempPolyline.setMap(mapRef.current);
+            polyline.setMap(mapRef.current);
+            polylinesRef.current.push(polyline);
         }
-    }, [positions, mapID]);
-    useEffect(() => {
-        const tripsShipcons = [];
-        if (appointmentTrips.length > 0) {
-            appointmentTrips.forEach((v) => {
-                const _shipcons = v.ship_cons;
-                _shipcons?.forEach((s) => {
-                    if (s.lat && s.lng) {
-                        const pin = new google.maps.marker.PinElement({
-                            glyph: s.tripOrder?.toString(),
-                        });
-                        const marker = new google.maps.marker.AdvancedMarkerElement({
-                            position: new google.maps.LatLng(Number(s.lat), Number(s.lng)),
-                            map: mapRef.current,
-                            content: pin.element,
-                            title: s.tripOrder?.toString(),
-                        });
-                        marker.addListener("click", () => setSelectedTrip(v || null));
-                        tripsShipcons.push(s.id);
-                    }
+        const tripShipcons = new Set();
+        appointmentTrips.forEach((trip) => {
+            trip.ship_cons?.forEach((s) => {
+                if (s.id) {
+                    tripShipcons.add(s.id);
+                }
+                if (!s.lat || !s.lng) {
+                    return;
+                }
+                const pin = new google.maps.marker.PinElement({
+                    glyphText: s.tripOrder?.toString(),
+                });
+                const marker = new google.maps.marker.AdvancedMarkerElement({
+                    position: new google.maps.LatLng(Number(s.lat), Number(s.lng)),
+                    map: mapRef.current,
+                    content: pin,
+                    title: s.tripOrder?.toString(),
                 });
+                marker.addListener("gmp-click", () => setSelectedTrip(trip));
+                markersRef.current.push(marker);
             });
-        }
-        if (shipcons.length > 0) {
-            const infoWindow = new window.google.maps.InfoWindow();
-            shipcons.forEach((s) => {
-                if (!tripsShipcons.includes(s.id))
-                    if (s.lat && s.lng) {
-                        const pin = new google.maps.marker.PinElement({
-                            glyph: s.stopNumber?.toString(),
-                        });
-                        const marker = new google.maps.marker.AdvancedMarkerElement({
-                            content: pin.element,
-                            position: new google.maps.LatLng(Number(s.lat), Number(s.lng)),
-                            title: s.stopNumber?.toString(),
-                            map: mapRef.current,
-                        });
-                        marker.addListener("click", () => {
-                            infoWindow.setContent(`<b>${s.name}</b><br/>No Trip Assigned`);
-                            infoWindow.open({
-                                anchor: marker,
-                            });
-                        });
-                    }
+        });
+        shipcons.forEach((s) => {
+            if (tripShipcons.has(s.id) || !s.lat || !s.lng) {
+                return;
+            }
+            const pin = new google.maps.marker.PinElement({
+                glyphText: s.stopNumber?.toString(),
             });
-        }
-    }, [appointmentTrips, mapID]);
-    return (_jsxs(Box, { height: "calc(100vh - 210px)", children: [_jsx(NerdMap, { onIdle: (zoom, center) => {
-                    setZoom(zoom);
-                    setCenter(center);
-                }, zoom: zoom, center: center, ref: mapRef, mapId: mapID, disableDefaultUI: true }, id), selectedTrip ? (_jsx(Wrapper, { open: Boolean(selectedTrip), onClose: () => setSelectedTrip(null), children: _jsx(TripPanel, { appointmentTrip: selectedTrip, loadID: Number(id) }) })) : null, _jsx(PositionsPanel, { mapRef: mapRef })] }));
+            const marker = new google.maps.marker.AdvancedMarkerElement({
+                content: pin,
+                position: new google.maps.LatLng(Number(s.lat), Number(s.lng)),
+                title: s.stopNumber?.toString(),
+                map: mapRef.current,
+            });
+            marker.addListener("gmp-click", () => {
+                infoWindowRef.current.setContent(`<b>${s.name}</b><br/>No Trip Assigned`);
+                infoWindowRef.current.open({
+                    anchor: marker,
+                });
+            });
+            markersRef.current.push(marker);
+        });
+        return () => {
+            clearMapObjects();
+        };
+    }, [positions, appointmentTrips, shipcons, mapID]);
+    return (_jsxs(Box, { height: "calc(100vh - 210px)", children: [_jsx(NerdMap, { onIdle: (z, c) => {
+                    zoomRef.current = z;
+                    if (c)
+                        centerRef.current = c;
+                }, zoom: zoomRef.current, center: centerRef.current, ref: mapRef, mapId: mapID, disableDefaultUI: true }, id), selectedTrip ? (_jsx(Wrapper, { open: Boolean(selectedTrip), onClose: () => setSelectedTrip(null), children: _jsx(TripPanel, { appointmentTrip: selectedTrip, loadID: Number(id) }) })) : null, _jsx(PositionsPanel, { mapRef: mapRef, positions: positions, isLoading: positionsLoading })] }));
 }
 const Wrapper = ({ children, open, onClose, }) => {
-    const { t } = useTranslation("common", { i18n: salesKitI18n });
+    const { t } = useTranslation("common", {
+        i18n: salesKitI18n,
+    });
     const theme = useTheme();
     const matches = useMediaQuery(theme.breakpoints.down("sm"));
     if (matches) {
@@ -183,48 +216,40 @@ const Wrapper = ({ children, open, onClose, }) => {
                                 },
                             }, children: children }) }), _jsx(DialogActions, { children: _jsx(Button, { color: "neutral", variant: "soft", onClick: onClose, children: t("Close") }) })] }) }));
     }
-    else
-        return (_jsxs(Sheet, { sx: {
-                p: 1,
-                position: "absolute",
-                bottom: 30,
-                right: 20,
-                boxShadow: "0px 8px 16px rgba(155,155,155,0.3)",
-                borderRadius: "md",
-                cursor: "default",
-                maxHeight: "90%",
-            }, children: [_jsx(IconButton, { onClick: onClose, variant: "soft", size: "sm", sx: {
-                        zIndex: 1,
-                        position: "absolute",
-                        top: 0,
-                        right: 0,
+    return (_jsxs(Sheet, { sx: {
+            p: 1,
+            position: "absolute",
+            bottom: 30,
+            right: 20,
+            boxShadow: "0px 8px 16px rgba(155,155,155,0.3)",
+            borderRadius: "md",
+            cursor: "default",
+            maxHeight: "90%",
+        }, children: [_jsx(IconButton, { onClick: onClose, variant: "soft", size: "sm", sx: {
+                    zIndex: 1,
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    backgroundColor: "inherit",
+                    borderRadius: "6px 6px 0px 0px",
+                    ":hover": {
                         backgroundColor: "inherit",
-                        borderRadius: "6px 6px 0px 0px",
-                        ":hover": {
-                            backgroundColor: "inherit",
-                            color: "var(--variant-plainHoverColor, var(--joy-palette-neutral-plainHoverColor, var(--joy-palette-neutral-900, #0B0D0E)))",
-                        },
-                    }, children: _jsx("i", { className: "fa-regular fa-xmark" }) }), _jsx(Box, { sx: { width: 500, overflow: "auto" }, children: children })] }));
+                        color: "var(--variant-plainHoverColor, var(--joy-palette-neutral-plainHoverColor, var(--joy-palette-neutral-900, #0B0D0E)))",
+                    },
+                }, children: _jsx("i", { className: "fa-regular fa-xmark" }) }), _jsx(Box, { sx: {
+                    width: 500,
+                    overflow: "auto",
+                }, children: children })] }));
 };
-const PositionsPanel = ({ mapRef, }) => {
-    const { t } = useTranslation("common", { i18n: salesKitI18n });
-    const { id } = useContext(LoadIDContext);
-    const params = useMemo(() => ({
-        filters: JSON.stringify([
-            { name: "positions.loadID", comparison: "eq", value: id },
-        ]),
-        sorter: JSON.stringify([
-            { name: "positions.transactionTimeUTC", asc: false },
-        ]),
-    }), [id]);
-    const { isLoading } = useGetPositionsQuery(params);
-    const selectAllPositions = useMemo(() => getPositionsSelectors(params).selectAll, [params]);
-    const positions = useSelector(selectAllPositions);
+const PositionsPanel = ({ mapRef, positions, isLoading, }) => {
+    const { t } = useTranslation("common", {
+        i18n: salesKitI18n,
+    });
     const [stagedPosition, setStagedPosition] = useState();
     const [stagedMarker, setStagedMarker] = useState();
     const [railOnly, setRailOnly] = useState(false);
     const handleClick = (p) => {
-        if (p.id == stagedPosition?.id && stagedMarker) {
+        if (p.id === stagedPosition?.id && stagedMarker) {
             stagedMarker.map = null;
             mapRef.current?.setCenter(new google.maps.LatLng({
                 lat: 39.8097343,
@@ -233,24 +258,24 @@ const PositionsPanel = ({ mapRef, }) => {
             mapRef.current?.setZoom(5);
             setStagedMarker(undefined);
             setStagedPosition(undefined);
+            return;
         }
-        else {
-            const marker = stagedMarker
-                ? stagedMarker
-                : new google.maps.marker.AdvancedMarkerElement();
-            const pos = new google.maps.LatLng(Number(p.latitude), Number(p.longitude));
-            marker.position = pos;
-            marker.content = new google.maps.marker.PinElement({
-                background: "#1983ed",
-                borderColor: "#1983ed",
-                glyphColor: "#0b6bcb",
-            }).element;
-            marker.map = mapRef.current;
-            mapRef.current?.setCenter(pos);
-            mapRef.current?.setZoom(8);
-            setStagedMarker(marker);
-            setStagedPosition(p);
-        }
+        const marker = stagedMarker
+            ? stagedMarker
+            : new google.maps.marker.AdvancedMarkerElement();
+        const pos = new google.maps.LatLng(Number(p.latitude), Number(p.longitude));
+        marker.position = pos;
+        marker.content = new google.maps.marker.PinElement({
+            background: "#1983ed",
+            borderColor: "#1983ed",
+            glyphColor: "#0b6bcb",
+            glyphText: "",
+        });
+        marker.map = mapRef.current;
+        mapRef.current?.setCenter(pos);
+        mapRef.current?.setZoom(8);
+        setStagedMarker(marker);
+        setStagedPosition(p);
     };
     return (_jsx(Sheet, { sx: {
             position: "absolute",
@@ -259,12 +284,15 @@ const PositionsPanel = ({ mapRef, }) => {
             boxShadow: "0px 8px 16px rgba(155,155,155,0.3)",
             borderRadius: "md",
             cursor: "default",
-            display: { xs: "none", md: "block" },
+            display: {
+                xs: "none",
+                md: "block",
+            },
         }, children: _jsx(Box, { p: 0.5, children: _jsx(Grid, { container: true, gap: 0.5, sx: {
                     p: 0.5,
                     maxWidth: 310,
                     minWidth: 220,
-                }, justifyContent: "center", alignItems: "center", children: isLoading ? (_jsx(Grid, { xs: 12, height: "100%", children: _jsx(Skeleton, { variant: "rectangular", height: "100%", width: "100%" }) })) : positions.length === 0 ? (_jsx(Grid, { xs: 12, children: _jsx(Typography, { level: "h4", children: "No locations history" }) })) : (_jsxs(_Fragment, { children: [_jsx(Grid, { xs: 12, children: _jsx(Typography, { component: "label", endDecorator: _jsx(Switch, { sx: { ml: 1 }, checked: railOnly, onChange: (event) => setRailOnly(event.target.checked) }), children: "Rail Only" }) }), _jsx(Grid, { container: true, xs: 12, sx: {
+                }, justifyContent: "center", alignItems: "center", children: isLoading ? (_jsx(Grid, { xs: 12, height: "100%", children: _jsx(Skeleton, { variant: "rectangular", height: 30, width: 200 }) })) : positions.length === 0 ? (_jsx(Grid, { xs: 12, children: _jsx(Typography, { level: "h4", children: "No locations history" }) })) : (_jsxs(_Fragment, { children: [_jsx(Grid, { xs: 12, children: _jsx(Typography, { component: "label", endDecorator: _jsx(Switch, { sx: { ml: 1 }, checked: railOnly, onChange: (event) => setRailOnly(event.target.checked) }), children: "Rail Only" }) }), _jsx(Grid, { container: true, xs: 12, sx: {
                                 overflowY: "auto",
                                 width: "fit-content",
                                 height: "calc(100vh - 300px)",
@@ -275,7 +303,9 @@ const PositionsPanel = ({ mapRef, }) => {
                                         width: "100%",
                                         justifyContent: "start",
                                     }, onClick: () => handleClick(p), children: _jsxs(Box, { children: [_jsx(Typography, { children: `${p.city}, ${p.state}` }), p.transactionTimeLocal ? (_jsxs(Typography, { level: "body-sm", children: [DateTime.fromFormat(p.transactionTimeLocal, "yyyy-MM-dd HH:mm:ss")
-                                                        .setZone("utc", { keepLocalTime: true })
+                                                        .setZone("utc", {
+                                                        keepLocalTime: true,
+                                                    })
                                                         .toFormat("MM/dd/yy HH:mm"), " ", "(", t("Local Time"), ")"] })) : null, _jsx(Typography, { level: "body-xs", component: "i", children: `${SOURCES[p.sourceID]}${p.reporter ? ` (${p.reporter})` : ""}` }), p.status ? (_jsx(Chip, { color: "success", variant: "solid", size: "sm", children: p.status })) : null] }) }) }, i))) })] })) }) }) }));
 };
 //# sourceMappingURL=lepLoadLocation.js.map