Load the Intl.Segmenter and Intl.DurationFormat polyfills only if needed (#2778)

* Load the Intl.Segmenter polyfill only if needed

* Also polyfill Intl.DurationFormat only if needed

* Polyfill Intl.* in tests

* Load the default translations in tests

* Instanciate the Intl.DurationFormat in the component

src/reactions/RaisedHandIndicator.tsx

@@ -11,19 +11,12 @@ import {
   useCallback,
   useEffect,
   useState,
+  useMemo,
 } from "react";
-import { DurationFormat } from "@formatjs/intl-durationformat";
 import { useTranslation } from "react-i18next";
 
 import { ReactionIndicator } from "./ReactionIndicator";
 
-const durationFormatter = new DurationFormat(undefined, {
-  minutesDisplay: "always",
-  secondsDisplay: "always",
-  hoursDisplay: "auto",
-  style: "digital",
-});
-
 export function RaisedHandIndicator({
   raisedHandTime,
   miniature,
@@ -38,6 +31,17 @@ export function RaisedHandIndicator({
   const { t } = useTranslation();
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
+  const durationFormatter = useMemo(
+    () =>
+      new Intl.DurationFormat(undefined, {
+        minutesDisplay: "always",
+        secondsDisplay: "always",
+        hoursDisplay: "auto",
+        style: "digital",
+      }),
+    [],
+  );
+
   const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (event) => {
       if (!onClick) {
@@ -69,7 +73,7 @@ export function RaisedHandIndicator({
     calculateTime();
     const to = setInterval(calculateTime, 1000);
     return (): void => clearInterval(to);
-  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer, durationFormatter]);
 
   if (!raisedHandTime) {
     return;