Description
Hey, thank you so much for making this repo public! This is pure gold. Just wanted to inform you about something I discovered while trying to extend on the logic you already provided. In your article you note:
"Another thing I missed was a dev environment double-render example. With NextJs 13.4+, React strcit mode is enabled by default on the dev environment. So if you have an initializing function that adds things like Primitives for example, you need to have a cleanup function so the same things don’t get added twice. I added an example in the repo on May 19 2024 tackling this. Or you can turn off React Strict mode… but I do not suggest you doing that!"
I think that your css styles are actually hiding the fact that there is two viewers initialized. That is why when you zoom in to the red ellipse given by the positions, the rendering starts to break down... take a look:
https://drive.google.com/file/d/1j9C1kiGAayKuzIhEz2QUg1ub8imGv-gB/view?usp=sharing
In the first part of the video, I am visiting your deployed version of the app. In the second example where the ellipse does not break down, I have disabled strict mode because when removing the default styling that your repo offers and installing tailwindcss I discovered that the viewer gets rendered twice. I am trying to combat this by fetching terrain data in a server component and passing as props but no luck yet. Doesn't seem to happen in prod though, but I suspect that your deployed app has two viewers overlayed on top of each other.
For reference here is a deployed version of my app (turned strict mode back on for deployment): https://flight-planner-next-git-se-d8bdb6-mauriciorojascareers-projects.vercel.app/