Merge pull request #455 from HSLdevcom/DT-6296

DT-6296: Varoitukset ja hälytykset nykivät tietyillä näytöillä

package.json

@@ -52,7 +52,8 @@
     "suncalc": "1.8.0",
     "url": "^0.11.0",
     "uuid": "^8.3.2",
-    "nth-check": "^2.1.1"
+    "nth-check": "^2.1.1",
+    "react-animate-height": "^3.2.3"
   },
   "scripts": {
     "start-prod": "cd server && npm start",
@@ -118,6 +119,7 @@
     "not op_mini all"
   ],
   "overrides": {
-    "nth-check": "$nth-check"
+    "nth-check": "$nth-check",
+    "react-animate-height": "$react-animate-height"
   }
 }

src/ui/MonitorAlertRow.tsx

@@ -41,7 +41,7 @@ const MonitorAlertRow: FC<IProps> = ({
     const windowHeight = preview ? 370 : window.innerWidth;
     setAnimationWidth(width);
     alertOrientation === 'horizontal'
-      ? setSpeed((width / windowWidth) * 10) // 10 means that it should take 10 seconds for a word appearing from the right to reach the left side of the screen
+      ? setSpeed((width / windowWidth) * 8) // 10 means that it should take 10 seconds for a word appearing from the right to reach the left side of the screen
       : setSpeed((width / (windowHeight / 6)) * 5);
     setUpdate(true);
   };
@@ -110,7 +110,7 @@ const MonitorAlertRow: FC<IProps> = ({
           })}
           onAnimationIteration={() => {
             updateAnimation();
-            setTimeout(() => setUpdate(false), 100);
+            requestAnimationFrame(() => setUpdate(false));
           }}
         >
           {alertElements}