Fix skipped map pan/zoom animation when switching location

[raksooo]

This PR adds a custom ZoomableGroup component which doesn't contain the issue where the map zooms and pans to the initial location. As a result the other workaround can be removed and therefore both the initial transition issue and the missing transition issue caused by the first workaround is fixed.

The ZoomableGroup implementation can be removed when this issue has been solved:
zcreativelabs/react-simple-maps#228

Git checklist:

• Describe the change in CHANGELOG.md under the [Unreleased] header.
• Check that commits follow the Mullvad coding guidelines

---

This change is 

[pronebird]

Reviewed 2 of 2 files at r1.
Reviewable status: complete! all files reviewed, all discussions resolved

---

gui/src/renderer/components/SvgMap.tsx, line 289 at r1 (raw file):

  const transform = useMemo(() => {
    const [x, y] = projection(center) ?? [0, 0];
    return `translate(${width / 2 - x * zoom} ${height / 2 - y * zoom}) scale(${zoom})`;

FYI I am no big fan of math within string interpolation. I think it makes code harder to follow. I think it would be better to move those computations to variables.

[pronebird]

Reviewable status: complete! all files reviewed, all discussions resolved

[pronebird]

Reviewable status: complete! all files reviewed, all discussions resolved

[raksooo]

Reviewable status: 1 of 2 files reviewed, all discussions resolved (waiting on @pronebird)

---

gui/src/renderer/components/SvgMap.tsx, line 289 at r1 (raw file):

Previously, pronebird (Andrej Mihajlov) wrote…

FYI I am no big fan of math within string interpolation. I think it makes code harder to follow. I think it would be better to move those computations to variables.

Yeah, I agree. Done.

[pronebird]

Reviewed 1 of 1 files at r2.
Reviewable status: complete! all files reviewed, all discussions resolved