Preload map images once

3 files changed, 27 insertions, 17 deletions

diff --git a/modern/src/index.js b/modern/src/index.js
index 547e39ef..1aca25f8 100644
--- a/modern/src/index.js
+++ b/modern/src/index.js
@@ -12,6 +12,9 @@ import CachingController from './CachingController';
 import SocketController from './SocketController';
 import theme from './common/theme';
 import Navigation from './Navigation';
+import preloadImages from './map/core/preloadImages';
+
+preloadImages();
 
 const base = window.location.href.indexOf('modern') >= 0 ? '/modern' : '/';
 
diff --git a/modern/src/map/core/Map.js b/modern/src/map/core/Map.js
index cd7b8988..1e7fa76b 100644
--- a/modern/src/map/core/Map.js
+++ b/modern/src/map/core/Map.js
@@ -6,15 +6,13 @@ import React, {
 } from 'react';
 import { useSelector } from 'react-redux';
 import { SwitcherControl } from '../switcher/switcher';
-import deviceCategories from '../../common/util/deviceCategories';
-import { prepareIcon, loadImage } from './mapUtil';
 import {
   styleCarto, styleCustom, styleLocationIq, styleMapbox, styleMapTiler, styleOsm,
 } from './mapStyles';
 import { useAttributePreference } from '../../common/util/preferences';
-import palette from '../../common/theme/palette';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import usePersistedState, { savePersistedState } from '../../common/util/usePersistedState';
+import { mapImages } from './preloadImages';
 
 const element = document.createElement('div');
 element.style.width = '100%';
@@ -45,21 +43,11 @@ const updateReadyValue = (value) => {
 const initMap = async () => {
   if (ready) return;
   if (!map.hasImage('background')) {
-    const background = await loadImage('images/background.svg');
-    map.addImage('background', await prepareIcon(background), {
-      pixelRatio: window.devicePixelRatio,
-    });
-    await Promise.all(deviceCategories.map(async (category) => {
-      const results = [];
-      ['positive', 'negative', 'neutral'].forEach((color) => {
-        results.push(loadImage(`images/icon/${category}.svg`).then((icon) => {
-          map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.colors[color]), {
-            pixelRatio: window.devicePixelRatio,
-          });
-        }));
+    Object.entries(mapImages).forEach(([key, value]) => {
+      map.addImage(key, value, {
+        pixelRatio: window.devicePixelRatio,
       });
-      await Promise.all(results);
-    }));
+    });
   }
   updateReadyValue(true);
 };
diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js
new file mode 100644
index 00000000..e0796e1f
--- /dev/null
+++ b/modern/src/map/core/preloadImages.js
@@ -0,0 +1,19 @@
+import palette from '../../common/theme/palette';
+import deviceCategories from '../../common/util/deviceCategories';
+import { loadImage, prepareIcon } from './mapUtil';
+
+export const mapImages = {};
+
+export default async () => {
+  const background = await loadImage('images/background.svg');
+  mapImages.background = await prepareIcon(background);
+  await Promise.all(deviceCategories.map(async (category) => {
+    const results = [];
+    ['positive', 'negative', 'neutral'].forEach((color) => {
+      results.push(loadImage(`images/icon/${category}.svg`).then((icon) => {
+        mapImages[`${category}-${color}`] = prepareIcon(background, icon, palette.colors[color]);
+      }));
+    });
+    await Promise.all(results);
+  }));
+};