From 760a724374279874ff21a06743029aafb3f6a033 Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Thu, 14 Nov 2024 19:36:49 +0100
Subject: [PATCH 1/6] change markers and events to lazy

---
 src/app/sandbox/map/page.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/sandbox/map/page.tsx b/src/app/sandbox/map/page.tsx
index a8199260..03fd3757 100644
--- a/src/app/sandbox/map/page.tsx
+++ b/src/app/sandbox/map/page.tsx
@@ -3,6 +3,15 @@
 import Map from "@/components/map/map";
 import MapEventDemo from "./map-event-demo";
 import MapMarker from "@/components/map/map-marker";
+import dynamic from "next/dynamic";
+
+const LazyMapMarker = dynamic(() => import("@/components/map/map-marker"), {
+  ssr: false,
+});
+
+const LazyMapEventDemo = dynamic(() => import("./map-event-demo"), {
+  ssr: false,
+});
 
 function MapPage() {
   return (
@@ -12,13 +21,13 @@ function MapPage() {
         center={[45.567706816120364, 13.863458632993037]}
         zoom={17}
         markers={[
-          <MapMarker
+          <LazyMapMarker
             key={0}
             type="parking"
             position={[45.567196, 13.862597]}
             popupContent={"Parkirišče Mišja peč"}
           />,
-          <MapMarker
+          <LazyMapMarker
             key={1}
             type="wall"
             position={[45.568112, 13.863984]}
@@ -26,7 +35,7 @@ function MapPage() {
           />,
         ]}
       >
-        <MapEventDemo />
+        <LazyMapEventDemo />
       </Map>
       <div className="mb-16 mt-16">
         <h3 className="text-lg">Notes</h3>

From e311157acfd30ad3bd59adee8e38a12c8d5afcdd Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Fri, 15 Nov 2024 08:07:23 +0100
Subject: [PATCH 2/6] wip: lazy load placed marker in coordinates-input

---
 src/components/ui/coordinates-input.tsx | 31 +++++--------------------
 src/components/ui/placed-marker.tsx     | 26 +++++++++++++++++++++
 2 files changed, 32 insertions(+), 25 deletions(-)
 create mode 100644 src/components/ui/placed-marker.tsx

diff --git a/src/components/ui/coordinates-input.tsx b/src/components/ui/coordinates-input.tsx
index afc37bf8..9f4181d4 100644
--- a/src/components/ui/coordinates-input.tsx
+++ b/src/components/ui/coordinates-input.tsx
@@ -8,10 +8,9 @@ import Map from "../map/map";
 import Button from "./button";
 import Dialog, { DialogSize, DialogTitleSize } from "./dialog";
 import TextField, { TTextFieldProps } from "./text-field";
-import { Dispatch, SetStateAction, useState } from "react";
-import { useMapEvent } from "react-leaflet";
-import MapMarker from "../map/map-marker";
+import { useState } from "react";
 import IconMarker from "./icons/marker";
+import dynamic from "next/dynamic";
 
 type TCoordinatesInputProps = TTextFieldProps & {
   dialogTitle: string;
@@ -93,7 +92,7 @@ function CoordinatesInput({
             zoom={mapZoom}
             scrollWheelZoom={true}
           >
-            <PlacedMarker
+            <LazyPlacedMarker
               position={markerPosition}
               setPosition={setMarkerPosition}
               markerType={markerType}
@@ -105,27 +104,9 @@ function CoordinatesInput({
   );
 }
 
-type TPlacedMarkerProps = {
-  position: [number, number] | undefined;
-  setPosition: Dispatch<SetStateAction<[number, number] | undefined>>;
-  markerType: "wall" | "parking";
-};
-
-function PlacedMarker({
-  position,
-  setPosition,
-  markerType,
-}: TPlacedMarkerProps) {
-  useMapEvent("click", (e) => {
-    setPosition([e.latlng.lat, e.latlng.lng]);
-  });
-
-  return (
-    position && (
-      <MapMarker type={markerType} position={position} interactive={false} />
-    )
-  );
-}
+export const LazyPlacedMarker = dynamic(() => import("./placed-marker"), {
+  ssr: false,
+});
 
 /**
  * Receives a string representation of coordinates
diff --git a/src/components/ui/placed-marker.tsx b/src/components/ui/placed-marker.tsx
new file mode 100644
index 00000000..f4cb7afb
--- /dev/null
+++ b/src/components/ui/placed-marker.tsx
@@ -0,0 +1,26 @@
+import { useMapEvent } from "react-leaflet";
+import MapMarker from "../map/map-marker";
+import { Dispatch, SetStateAction } from "react";
+import dynamic from "next/dynamic";
+
+type TPlacedMarkerProps = {
+  position: [number, number] | undefined;
+  setPosition: Dispatch<SetStateAction<[number, number] | undefined>>;
+  markerType: "wall" | "parking";
+};
+
+export default function PlacedMarker({
+  position,
+  setPosition,
+  markerType,
+}: TPlacedMarkerProps) {
+  useMapEvent("click", (e) => {
+    setPosition([e.latlng.lat, e.latlng.lng]);
+  });
+
+  return (
+    position && (
+      <MapMarker type={markerType} position={position} interactive={false} />
+    )
+  );
+}

From 899e84670db31bb4670541560e788644da3cbe1d Mon Sep 17 00:00:00 2001
From: salamca <tomaz.bevk@gmail.com>
Date: Sat, 16 Nov 2024 13:30:16 +0100
Subject: [PATCH 3/6] working but slight lag

---
 src/app/sandbox/map/map-event-demo.tsx  |  1 +
 src/app/sandbox/map/page.tsx            | 15 ++------
 src/components/map/lazy-map-marker.tsx  | 50 ++++++++++++++++++++++++
 src/components/map/map-marker.tsx       | 51 ++++---------------------
 src/components/ui/coordinates-input.tsx | 35 ++++++++++++++---
 5 files changed, 91 insertions(+), 61 deletions(-)
 create mode 100644 src/components/map/lazy-map-marker.tsx

diff --git a/src/app/sandbox/map/map-event-demo.tsx b/src/app/sandbox/map/map-event-demo.tsx
index 3bfe170e..4caa508a 100644
--- a/src/app/sandbox/map/map-event-demo.tsx
+++ b/src/app/sandbox/map/map-event-demo.tsx
@@ -8,6 +8,7 @@ function MapEventDemo() {
   const [position, setPosition] = useState<[number, number] | undefined>();
   const map = useMapEvent("click", (e) => {
     console.log(e.latlng);
+    console.log(map);
     setPosition([e.latlng.lat, e.latlng.lng]);
   });
 
diff --git a/src/app/sandbox/map/page.tsx b/src/app/sandbox/map/page.tsx
index 03fd3757..a8199260 100644
--- a/src/app/sandbox/map/page.tsx
+++ b/src/app/sandbox/map/page.tsx
@@ -3,15 +3,6 @@
 import Map from "@/components/map/map";
 import MapEventDemo from "./map-event-demo";
 import MapMarker from "@/components/map/map-marker";
-import dynamic from "next/dynamic";
-
-const LazyMapMarker = dynamic(() => import("@/components/map/map-marker"), {
-  ssr: false,
-});
-
-const LazyMapEventDemo = dynamic(() => import("./map-event-demo"), {
-  ssr: false,
-});
 
 function MapPage() {
   return (
@@ -21,13 +12,13 @@ function MapPage() {
         center={[45.567706816120364, 13.863458632993037]}
         zoom={17}
         markers={[
-          <LazyMapMarker
+          <MapMarker
             key={0}
             type="parking"
             position={[45.567196, 13.862597]}
             popupContent={"Parkirišče Mišja peč"}
           />,
-          <LazyMapMarker
+          <MapMarker
             key={1}
             type="wall"
             position={[45.568112, 13.863984]}
@@ -35,7 +26,7 @@ function MapPage() {
           />,
         ]}
       >
-        <LazyMapEventDemo />
+        <MapEventDemo />
       </Map>
       <div className="mb-16 mt-16">
         <h3 className="text-lg">Notes</h3>
diff --git a/src/components/map/lazy-map-marker.tsx b/src/components/map/lazy-map-marker.tsx
new file mode 100644
index 00000000..0681a032
--- /dev/null
+++ b/src/components/map/lazy-map-marker.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { Marker, Popup } from "react-leaflet";
+import L from "leaflet";
+import { ReactNode } from "react";
+import { useClientRenderToString } from "@/hooks/useClientRenderToString";
+import IconMarkerWall from "../ui/icons/marker-wall";
+import IconMarkerParking from "../ui/icons/marker-parking";
+import { IconSize } from "../ui/icons/icon-size";
+
+type TLazyMapMarkerProps = {
+  type: "parking" | "wall";
+  position: [number, number];
+  popupContent?: ReactNode;
+  interactive?: boolean;
+};
+
+function LazyMapMarker({
+  type,
+  position,
+  popupContent,
+  interactive = true,
+}: TLazyMapMarkerProps) {
+  const [icon] = useClientRenderToString(
+    type === "parking" ? (
+      <IconMarkerParking size={IconSize.xl} />
+    ) : (
+      <IconMarkerWall size={IconSize.xl} />
+    )
+  );
+
+  return (
+    <Marker
+      icon={L.divIcon({
+        className: "",
+        html: icon,
+        iconSize: [52, 52],
+        iconAnchor: [26, 52],
+        popupAnchor: [0, -46],
+      })}
+      position={position}
+      interactive={interactive}
+    >
+      {popupContent && <Popup>{popupContent}</Popup>}
+    </Marker>
+  );
+}
+
+export default LazyMapMarker;
+export type { TLazyMapMarkerProps };
diff --git a/src/components/map/map-marker.tsx b/src/components/map/map-marker.tsx
index 31aa44bd..6c6de148 100644
--- a/src/components/map/map-marker.tsx
+++ b/src/components/map/map-marker.tsx
@@ -1,49 +1,12 @@
-"use client";
+import dynamic from "next/dynamic";
+import { TLazyMapMarkerProps as TMapMarkerProps } from "./lazy-map-marker";
 
-import { Marker, Popup } from "react-leaflet";
-import L from "leaflet";
-import { ReactNode } from "react";
-import { useClientRenderToString } from "@/hooks/useClientRenderToString";
-import IconMarkerWall from "../ui/icons/marker-wall";
-import IconMarkerParking from "../ui/icons/marker-parking";
-import { IconSize } from "../ui/icons/icon-size";
+const LazyMapMarker = dynamic(() => import("./lazy-map-marker"), {
+  ssr: false,
+});
 
-type TMapMarkerProps = {
-  type: "parking" | "wall";
-  position: [number, number];
-  popupContent?: ReactNode;
-  interactive?: boolean;
-};
-
-function MapMarker({
-  type,
-  position,
-  popupContent,
-  interactive = true,
-}: TMapMarkerProps) {
-  const [icon] = useClientRenderToString(
-    type === "parking" ? (
-      <IconMarkerParking size={IconSize.xl} />
-    ) : (
-      <IconMarkerWall size={IconSize.xl} />
-    )
-  );
-
-  return (
-    <Marker
-      icon={L.divIcon({
-        className: "",
-        html: icon,
-        iconSize: [52, 52],
-        iconAnchor: [26, 52],
-        popupAnchor: [0, -46],
-      })}
-      position={position}
-      interactive={interactive}
-    >
-      {popupContent && <Popup>{popupContent}</Popup>}
-    </Marker>
-  );
+function MapMarker(props: TMapMarkerProps) {
+  return <LazyMapMarker {...props} />;
 }
 
 export default MapMarker;
diff --git a/src/components/ui/coordinates-input.tsx b/src/components/ui/coordinates-input.tsx
index 9f4181d4..dbd77625 100644
--- a/src/components/ui/coordinates-input.tsx
+++ b/src/components/ui/coordinates-input.tsx
@@ -8,9 +8,12 @@ import Map from "../map/map";
 import Button from "./button";
 import Dialog, { DialogSize, DialogTitleSize } from "./dialog";
 import TextField, { TTextFieldProps } from "./text-field";
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import IconMarker from "./icons/marker";
 import dynamic from "next/dynamic";
+// import PlacedMarker from "./placed-marker";
+import { useMapEvent } from "react-leaflet";
+import MapMarker from "../map/map-marker";
 
 type TCoordinatesInputProps = TTextFieldProps & {
   dialogTitle: string;
@@ -92,7 +95,7 @@ function CoordinatesInput({
             zoom={mapZoom}
             scrollWheelZoom={true}
           >
-            <LazyPlacedMarker
+            <PlacedMarker
               position={markerPosition}
               setPosition={setMarkerPosition}
               markerType={markerType}
@@ -104,9 +107,31 @@ function CoordinatesInput({
   );
 }
 
-export const LazyPlacedMarker = dynamic(() => import("./placed-marker"), {
-  ssr: false,
-});
+type TPlacedMarkerProps = {
+  position: [number, number] | undefined;
+  setPosition: Dispatch<SetStateAction<[number, number] | undefined>>;
+  markerType: "wall" | "parking";
+};
+
+function PlacedMarker({
+  position,
+  setPosition,
+  markerType,
+}: TPlacedMarkerProps) {
+  useMapEvent("click", (e) => {
+    setPosition([e.latlng.lat, e.latlng.lng]);
+  });
+
+  return (
+    position && (
+      <MapMarker type={markerType} position={position} interactive={false} />
+    )
+  );
+}
+
+// export const LazyPlacedMarker = dynamic(() => import("./placed-marker"), {
+//   ssr: false,
+// });
 
 /**
  * Receives a string representation of coordinates

From 2f895f4a03153fb747afae0937c970a488a776fa Mon Sep 17 00:00:00 2001
From: salamca <tomaz.bevk@gmail.com>
Date: Sat, 16 Nov 2024 13:59:10 +0100
Subject: [PATCH 4/6] fix flicker on coordinates input marker placement.

---
 src/components/map/lazy-map-marker.tsx  |  3 +++
 src/components/ui/coordinates-input.tsx | 13 +++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/map/lazy-map-marker.tsx b/src/components/map/lazy-map-marker.tsx
index 0681a032..6094c3d8 100644
--- a/src/components/map/lazy-map-marker.tsx
+++ b/src/components/map/lazy-map-marker.tsx
@@ -13,6 +13,7 @@ type TLazyMapMarkerProps = {
   position: [number, number];
   popupContent?: ReactNode;
   interactive?: boolean;
+  hidden?: boolean;
 };
 
 function LazyMapMarker({
@@ -20,6 +21,7 @@ function LazyMapMarker({
   position,
   popupContent,
   interactive = true,
+  hidden,
 }: TLazyMapMarkerProps) {
   const [icon] = useClientRenderToString(
     type === "parking" ? (
@@ -40,6 +42,7 @@ function LazyMapMarker({
       })}
       position={position}
       interactive={interactive}
+      opacity={hidden ? 0 : 1}
     >
       {popupContent && <Popup>{popupContent}</Popup>}
     </Marker>
diff --git a/src/components/ui/coordinates-input.tsx b/src/components/ui/coordinates-input.tsx
index dbd77625..3c394a1e 100644
--- a/src/components/ui/coordinates-input.tsx
+++ b/src/components/ui/coordinates-input.tsx
@@ -122,11 +122,16 @@ function PlacedMarker({
     setPosition([e.latlng.lat, e.latlng.lng]);
   });
 
-  return (
-    position && (
-      <MapMarker type={markerType} position={position} interactive={false} />
-    )
+  return position ? (
+    <MapMarker type={markerType} position={position} interactive={false} />
+  ) : (
+    <MapMarker type={markerType} position={[0, 0]} interactive={false} hidden />
   );
+  // return (
+  //   position && (
+  //     <MapMarker type={markerType} position={position} interactive={false} />
+  //   )
+  // );
 }
 
 // export const LazyPlacedMarker = dynamic(() => import("./placed-marker"), {

From 6805e1ddd7dbc2cdf0eb4323f96412165412cd3e Mon Sep 17 00:00:00 2001
From: salamca <tomaz.bevk@gmail.com>
Date: Sat, 16 Nov 2024 14:12:19 +0100
Subject: [PATCH 5/6] clean up

---
 src/components/ui/coordinates-input.tsx | 11 -----------
 src/components/ui/placed-marker.tsx     | 26 -------------------------
 2 files changed, 37 deletions(-)
 delete mode 100644 src/components/ui/placed-marker.tsx

diff --git a/src/components/ui/coordinates-input.tsx b/src/components/ui/coordinates-input.tsx
index 3c394a1e..d5fde141 100644
--- a/src/components/ui/coordinates-input.tsx
+++ b/src/components/ui/coordinates-input.tsx
@@ -10,8 +10,6 @@ import Dialog, { DialogSize, DialogTitleSize } from "./dialog";
 import TextField, { TTextFieldProps } from "./text-field";
 import { Dispatch, SetStateAction, useState } from "react";
 import IconMarker from "./icons/marker";
-import dynamic from "next/dynamic";
-// import PlacedMarker from "./placed-marker";
 import { useMapEvent } from "react-leaflet";
 import MapMarker from "../map/map-marker";
 
@@ -127,17 +125,8 @@ function PlacedMarker({
   ) : (
     <MapMarker type={markerType} position={[0, 0]} interactive={false} hidden />
   );
-  // return (
-  //   position && (
-  //     <MapMarker type={markerType} position={position} interactive={false} />
-  //   )
-  // );
 }
 
-// export const LazyPlacedMarker = dynamic(() => import("./placed-marker"), {
-//   ssr: false,
-// });
-
 /**
  * Receives a string representation of coordinates
  * and returns false if cannot be parsed into valid coordinates
diff --git a/src/components/ui/placed-marker.tsx b/src/components/ui/placed-marker.tsx
deleted file mode 100644
index f4cb7afb..00000000
--- a/src/components/ui/placed-marker.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useMapEvent } from "react-leaflet";
-import MapMarker from "../map/map-marker";
-import { Dispatch, SetStateAction } from "react";
-import dynamic from "next/dynamic";
-
-type TPlacedMarkerProps = {
-  position: [number, number] | undefined;
-  setPosition: Dispatch<SetStateAction<[number, number] | undefined>>;
-  markerType: "wall" | "parking";
-};
-
-export default function PlacedMarker({
-  position,
-  setPosition,
-  markerType,
-}: TPlacedMarkerProps) {
-  useMapEvent("click", (e) => {
-    setPosition([e.latlng.lat, e.latlng.lng]);
-  });
-
-  return (
-    position && (
-      <MapMarker type={markerType} position={position} interactive={false} />
-    )
-  );
-}

From 098a6fcc7a55db58cce5569fcbf2ab32b7823235 Mon Sep 17 00:00:00 2001
From: Anze Demsar <demshy@gmail.com>
Date: Sun, 24 Nov 2024 13:56:59 +0100
Subject: [PATCH 6/6] remove console log

---
 src/app/sandbox/map/map-event-demo.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/sandbox/map/map-event-demo.tsx b/src/app/sandbox/map/map-event-demo.tsx
index 4caa508a..f5d8670d 100644
--- a/src/app/sandbox/map/map-event-demo.tsx
+++ b/src/app/sandbox/map/map-event-demo.tsx
@@ -7,8 +7,6 @@ import MapMarker from "@/components/map/map-marker";
 function MapEventDemo() {
   const [position, setPosition] = useState<[number, number] | undefined>();
   const map = useMapEvent("click", (e) => {
-    console.log(e.latlng);
-    console.log(map);
     setPosition([e.latlng.lat, e.latlng.lng]);
   });