speedspacechart: fix blinking in speed limit tags by importing images only once

Signed-off-by: Alice Khoudli <[email protected]>

Author: Synar

ui-speedspacechart/src/components/helpers/drawElements/speedLimitTags.ts

@@ -43,11 +43,17 @@ const TEXT_PADDING_TOP = 1;
 const ICON_BACKGROUND_WIDTH = 24;
 const ICON_BACKGROUND_HEIGHT = 24;
 
-export const drawSpeedLimitTags = async ({
+export const loadSpeedLimitTagsImages = async () => ({
+  questionImage: await loadSvgImage(questionBlobUrl),
+  alertFillImage: await loadSvgImage(alertFillBlobUrl),
+});
+
+export const drawSpeedLimitTags = ({
   ctx,
   width,
   height: marginTop,
   store,
+  images,
 }: SpeedLimitTagsLayerDrawFunctionParams) => {
   const {
     speedLimitTags,
@@ -65,9 +71,6 @@ export const drawSpeedLimitTags = async ({
 
   const maxPosition = maxPositionValue(store.speeds);
 
-  const questionImage = await loadSvgImage(questionBlobUrl);
-  const alertFillImage = await loadSvgImage(alertFillBlobUrl);
-
   let speedLimitTagsBackgroundColor = LINEAR_LAYERS_BACKGROUND_COLOR.FIRST;
 
   if (electricalProfiles && powerRestrictions) {
@@ -127,7 +130,7 @@ export const drawSpeedLimitTags = async ({
       }
 
       if (tag === 'incompatible' || tag === 'missing_from_train') {
-        const image = tag === 'incompatible' ? alertFillImage : questionImage;
+        const image = tag === 'incompatible' ? images.alertFillImage : images.questionImage;
 
         ctx.fillStyle = color;
 
@@ -143,16 +146,16 @@ export const drawSpeedLimitTags = async ({
           ICON_BACKGROUND_HEIGHT,
           cornerRadius
         );
-
-        drawSvgImageWithColor(
-          ctx,
-          image,
-          iconXPosition + ICON_OFFSET,
-          iconYPosition + ICON_OFFSET,
-          ICON_WIDTH,
-          ICON_HEIGHT,
-          WHITE.hex()
-        );
+        if (image !== null)
+          drawSvgImageWithColor(
+            ctx,
+            image,
+            iconXPosition + ICON_OFFSET,
+            iconYPosition + ICON_OFFSET,
+            ICON_WIDTH,
+            ICON_HEIGHT,
+            WHITE.hex()
+          );
       } else {
         ctx.fillStyle = 'white';
         ctx.font = '600 12px "IBM Plex Sans"';
@@ -172,11 +175,11 @@ export const drawSpeedLimitTags = async ({
   ctx.clearRect(width - MARGIN_RIGHT, 0, width, LINEAR_LAYERS_HEIGHTS.SPEED_LIMIT_TAGS_HEIGHT);
 };
 
-export const computeTooltip = async ({
+export const computeTooltip = ({
   width,
   height: marginTop,
   store,
-}: DrawFunctionParams): Promise<tooltipInfos | null> => {
+}: DrawFunctionParams): tooltipInfos | null => {
   const { speedLimitTags, ratioX, leftOffset, cursor } = store;
 
   const { MARGIN_TOP, MARGIN_LEFT } = MARGINS;

ui-speedspacechart/src/components/layers/SpeedLimitTagsLayer.tsx

@@ -1,21 +1,39 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import type { Store, tooltipInfos } from '../../types/chartTypes';
 import Tooltip from '../common/Tooltip';
 import { LINEAR_LAYERS_HEIGHTS } from '../const';
-import { drawSpeedLimitTags, computeTooltip } from '../helpers/drawElements/speedLimitTags';
+import {
+  drawSpeedLimitTags,
+  computeTooltip,
+  loadSpeedLimitTagsImages,
+} from '../helpers/drawElements/speedLimitTags';
 
 type SpeedLimitTagsLayerProps = {
   width: number;
   marginTop: number;
   store: Store;
 };
+type ImagesType = {
+  questionImage: HTMLImageElement | null;
+  alertFillImage: HTMLImageElement | null;
+};
 const TOOLTIP_HEIGHT = 40;
 const MARGIN_ADJUSTMENT = 2;
 
 const SpeedLimitTagsLayer = ({ width, marginTop, store }: SpeedLimitTagsLayerProps) => {
   const canvas = useRef<HTMLCanvasElement>(null);
   const tooltip = useRef<tooltipInfos | null>();
+  const [images, setImages] = useState<ImagesType>({ questionImage: null, alertFillImage: null });
+
+  useEffect(() => {
+    if (images.questionImage !== null && images.alertFillImage !== null) return;
+    const fetchImages = async () => {
+      const { questionImage, alertFillImage } = await loadSpeedLimitTagsImages();
+      setImages({ questionImage, alertFillImage });
+    };
+    fetchImages();
+  }, [images]);
 
   useEffect(() => {
     const updateCanvas = async () => {
@@ -36,6 +54,7 @@ const SpeedLimitTagsLayer = ({ width, marginTop, store }: SpeedLimitTagsLayerPro
         width,
         height: marginTop,
         store: restrictedStore,
+        images,
       });
     };
     updateCanvas();
@@ -48,6 +67,7 @@ const SpeedLimitTagsLayer = ({ width, marginTop, store }: SpeedLimitTagsLayerPro
     store.layersDisplay.electricalProfiles,
     store.layersDisplay.powerRestrictions,
     store.speeds,
+    images,
   ]);
 
   useEffect(() => {

ui-speedspacechart/src/types/chartTypes.ts

@@ -105,6 +105,7 @@ export type SpeedLimitTagsLayerDrawFunctionParams = {
   width: number;
   height: number;
   store: SpeedLimitTagsLayerDrawingStore;
+  images: { questionImage: HTMLImageElement | null; alertFillImage: HTMLImageElement | null };
 };
 
 export type TrainDetails = {