From 9b1d6fed454e736b66ce1771f29129c3ccd034ae Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Sun, 20 Apr 2025 18:14:30 -0700
Subject: [PATCH] fixed marker first overlapping when rendered

---
 apps/dispatch/app/_components/SmartPopup.tsx  |  11 ++++++++---
 .../app/dispatch/_components/map/Map.tsx      |   7 ++++++-
 apps/dispatch/app/globals.css                 |   4 ----
 grafana/grafana.db                            | Bin 1122304 -> 1122304 bytes
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/dispatch/app/_components/SmartPopup.tsx b/apps/dispatch/app/_components/SmartPopup.tsx
index e7fe2e45..c062b882 100644
--- a/apps/dispatch/app/_components/SmartPopup.tsx
+++ b/apps/dispatch/app/_components/SmartPopup.tsx
@@ -2,7 +2,7 @@ import { cn } from "helpers/cn";
 import { RefAttributes, useEffect, useImperativeHandle } from "react";
 import { createContext, Ref, useContext, useState } from "react";
 import { Popup, PopupProps, useMap } from "react-leaflet";
-import { Popup as LPopup } from "leaflet";
+import { Popup as LPopup, popup } from "leaflet";
 
 const PopupContext = createContext({
 	anchor: "topleft",
@@ -97,6 +97,7 @@ export const SmartPopup = (
 			wrapperClassName?: string;
 		},
 ) => {
+	const [showContent, setShowContent] = useState(false);
 	const { smartPopupRef, id, className, wrapperClassName } = props;
 
 	const [anchor, setAnchor] = useState<
@@ -115,7 +116,10 @@ export const SmartPopup = (
 	const map = useMap();
 
 	useEffect(() => {
-		setTimeout(handleConflict, 50);
+		setTimeout(() => {
+			handleConflict();
+			setShowContent(true);
+		}, 50); // wait for marker to be positioned by leaflet, then check for conflicts, for now no better solution
 		map.on("zoom", handleConflict);
 
 		return () => {
@@ -124,12 +128,13 @@ export const SmartPopup = (
 	}, [map, anchor]);
 
 	return (
-		<Popup {...props} className={cn("relative", wrapperClassName)}>
+		<Popup {...props} className={cn("relative", wrapperClassName)} interactive>
 			<div
 				className={cn(
 					"pointer-events-auto bg-base-100 relative",
 					anchor.includes("right") && "-translate-x-full",
 					anchor.includes("bottom") && "-translate-y-full",
+					!showContent && "opacity-0 pointer-events-none",
 					className,
 				)}
 			>
diff --git a/apps/dispatch/app/dispatch/_components/map/Map.tsx b/apps/dispatch/app/dispatch/_components/map/Map.tsx
index 56166236..57e9904f 100644
--- a/apps/dispatch/app/dispatch/_components/map/Map.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/Map.tsx
@@ -12,7 +12,12 @@ export default ({}) => {
 	const { map } = useMapStore();
 
 	return (
-		<MapContainer className="flex-1" center={map.center} zoom={map.zoom}>
+		<MapContainer
+			className="flex-1"
+			center={map.center}
+			zoom={map.zoom}
+			fadeAnimation={false}
+		>
 			<BaseMaps />
 			<SearchElements />
 			<ContextMenu />
diff --git a/apps/dispatch/app/globals.css b/apps/dispatch/app/globals.css
index da3f4992..06986ec6 100644
--- a/apps/dispatch/app/globals.css
+++ b/apps/dispatch/app/globals.css
@@ -8,10 +8,6 @@
 	--color-rescuetrack-highlight: #ff4500;
 }
 
-.leaflet-fade-anim .leaflet-popup {
-	transition: opacity 0s !important;
-}
-
 .leaflet-popup-tip-container {
 	display: none;
 }
diff --git a/grafana/grafana.db b/grafana/grafana.db
index 34ee4f67da1251e158a414b0cd7e223982030cc9..80bfa60ca2e8b5301e65733b7a7dd38370f55301 100644
GIT binary patch
delta 87
zcmZoT;L>owWr8$g!bBNo#)QU%)&$1Z1g6#m=GFw3)&$np1h&=$_N@sVrTVNP8LYGK
hwcpa`0Afxc<^p1FAm#yLULfWJV*c&7^aa#D003HnAZP#p

delta 87
zcmZoT;L>owWr8$g+(a2?#<<3W)&$1Z1g6#m=GFw3)&$np1h&=$_N@sVrTVNv8LZRw
g+HdJ|05K;Ja{)0o5c2>rFA(zqG5_{k`T}Yn06mQ#t^fc4