@arcblock/ux 3.4.6 → 3.4.7

package/lib/AnimationWaiter/index.js

@@ -1,92 +1,98 @@
-import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import { useState as l, useRef as $, useEffect as c } from "react";
-import { useTheme as M, Skeleton as E } from "@mui/material";
+import { jsxs as T, jsx as s } from "react/jsx-runtime";
+import { lazy as M, useState as l, useRef as z, useEffect as m, Suspense as E } from "react";
+import { useTheme as F, Skeleton as P } from "@mui/material";
 import n from "prop-types";
-import F from "react-lottie-player";
-import P from "lodash/noop";
-import { styled as R } from "../Theme/index.js";
-function W({
-  animationData: m = null,
-  size: s = 256,
+import R from "lodash/noop";
+import { styled as W } from "../Theme/index.js";
+const q = M(() => import("react-lottie-player"));
+function B({
+  animationData: c = null,
+  size: o = 256,
   message: r = "",
   messageDuration: f = 5e3,
-  messageLoop: T = !0,
+  messageLoop: v = !0,
   tips: a = [],
   tipsDuration: u = 5e3,
-  maybeDuration: v = 12e4,
+  maybeDuration: x = 12e4,
   speed: h = 1,
-  increaseSpeed: x = 0,
-  ...I
+  increaseSpeed: I = 0,
+  ...k
 }) {
-  const g = M(), [d, N] = l(0), [y, k] = l(h), [w, A] = l(0), [O, S] = l(null), [j, p] = l(!m), C = $((/* @__PURE__ */ new Date()).getTime());
-  Array.isArray(r) || (r = [r]), c(() => {
-    m || (p(!0), (async () => {
+  const g = F(), [d, N] = l(0), [y, A] = l(h), [w, S] = l(0), [O, j] = l(null), [C, p] = l(!c), L = z((/* @__PURE__ */ new Date()).getTime());
+  Array.isArray(r) || (r = [r]), m(() => {
+    c || (p(!0), (async () => {
       try {
         const e = await (g.palette.mode === "dark" ? import("./dark-animation.json.js") : import("./default-animation.json.js"));
-        S(e.default || e), p(!1);
+        j(e.default || e), p(!1);
       } catch (e) {
         console.error("Failed to load animation:", e), p(!1);
       }
     })());
-  }, [m, g.palette.mode]), c(() => {
+  }, [c, g.palette.mode]), m(() => {
     if (!r)
       return;
     let t = 0;
     const e = setInterval(() => {
-      t++, t >= r.length && (T ? t = 0 : t = r.length - 1), A(t);
+      t++, t >= r.length && (v ? t = 0 : t = r.length - 1), S(t);
     }, f);
     return () => {
       clearInterval(e);
     };
-  }, [r, f]), c(() => {
+  }, [r, f]), m(() => {
     if (!a.length)
-      return P;
+      return R;
     const t = setTimeout(() => {
       let e = d + 1;
       e >= a.length && (e = 0), N(e);
     }, u);
     return () => clearTimeout(t);
-  }, [a, u, d]), c(() => {
+  }, [a, u, d]), m(() => {
     const t = setTimeout(() => {
-      let i = ((/* @__PURE__ */ new Date()).getTime() - C.current) / v;
+      let i = ((/* @__PURE__ */ new Date()).getTime() - L.current) / x;
       i > 1 && (i = 1);
-      const D = h + x * i;
-      k(D);
+      const $ = h + I * i;
+      A($);
     }, 1e3);
     return () => clearTimeout(t);
   }, [y]);
-  const L = (t) => {
+  const D = (t) => {
     let e = "message-before";
     return w === t ? e = "show-message" : w < t && (e = "message-after"), e;
-  };
-  return /* @__PURE__ */ b(q, { ...I, children: [
-    j ? /* @__PURE__ */ o("div", { style: { width: s, height: s, display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ o(E, { variant: "rounded", width: s * 0.4, height: s * 0.4 }) }) : /* @__PURE__ */ o(
-      F,
-      {
-        loop: !0,
-        animationData: m || O,
-        play: !0,
-        speed: y,
-        style: {
-          width: s,
-          height: s
+  }, b = /* @__PURE__ */ s("div", { style: { width: o, height: o, display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ s(P, { variant: "rounded", width: o * 0.4, height: o * 0.4 }) });
+  return /* @__PURE__ */ T(G, { ...k, children: [
+    C ? (
+      // 当正在加载默认动画时直接展示 fallback
+      b
+    ) : (
+      // 否则使用 Suspense 包裹懒加载的 Lottie，Suspense 会在 Lottie 本身未加载完成时展示 fallback
+      /* @__PURE__ */ s(E, { fallback: b, children: /* @__PURE__ */ s(
+        q,
+        {
+          loop: !0,
+          animationData: c || O,
+          play: !0,
+          speed: y,
+          style: {
+            width: o,
+            height: o
+          }
         }
-      }
+      ) })
     ),
-    r && /* @__PURE__ */ o("div", { className: "waiter-message", children: r.map((t, e) => {
-      const i = L(e);
-      return /* @__PURE__ */ b(
+    r && /* @__PURE__ */ s("div", { className: "waiter-message", children: r.map((t, e) => {
+      const i = D(e);
+      return /* @__PURE__ */ T(
         "div",
         {
           children: [
-            /* @__PURE__ */ o("span", { className: `message-block ${i}`, children: t }),
-            /* @__PURE__ */ o("span", { className: `placeholder-message ${i}`, children: t })
+            /* @__PURE__ */ s("span", { className: `message-block ${i}`, children: t }),
+            /* @__PURE__ */ s("span", { className: `placeholder-message ${i}`, children: t })
           ]
         },
         e
       );
     }) }),
-    a.length ? /* @__PURE__ */ o("div", { className: "waiter-tips-container", children: a.map((t, e) => /* @__PURE__ */ o(
+    a.length ? /* @__PURE__ */ s("div", { className: "waiter-tips-container", children: a.map((t, e) => /* @__PURE__ */ s(
       "div",
       {
         className: `waiter-tips-block ${d === e ? "show-tips" : ""}`,
@@ -96,7 +102,7 @@ function W({
     )) }) : ""
   ] });
 }
-W.propTypes = {
+B.propTypes = {
   animationData: n.oneOfType([n.object, n.oneOf([null])]),
   size: n.oneOfType([n.number, n.string]),
   message: n.oneOfType([n.string, n.arrayOf(n.node)]),
@@ -108,7 +114,7 @@ W.propTypes = {
   maybeDuration: n.number,
   increaseSpeed: n.number
 };
-const q = R("div")`
+const G = W("div")`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -179,5 +185,5 @@ const q = R("div")`
   }
 `;
 export {
-  W as default
+  B as default
 };

package/lib/Theme/theme.js

@@ -1,64 +1,64 @@
-import { createTheme as p, responsiveFontSizes as O } from "@mui/material";
-import A from "webfontloader";
-import { DEFAULT_FONTS as _, getDefaultThemePrefer as b, mergeThemeOptions as f, getBlockletThemeOptions as d, mergeAllThemeOptions as C, BLOCKLET_THEME_DARK as k, BLOCKLET_THEME_LIGHT as x } from "@blocklet/theme";
+import { createTheme as f, responsiveFontSizes as A } from "@mui/material";
+import _ from "webfontloader";
+import { DEFAULT_FONTS as b, getDefaultThemePrefer as C, mergeThemeOptions as d, getBlockletThemeOptions as h, mergeAllThemeOptions as k, BLOCKLET_THEME_DARK as x, BLOCKLET_THEME_LIGHT as E } from "@blocklet/theme";
 import { mergeThemeOptions as Q, mergeAllThemeOptions as V } from "@blocklet/theme";
-import { cleanedObj as c } from "../Util/index.js";
+import { cleanedObj as m } from "../Util/index.js";
 import "@fontsource/roboto/latin-400.css";
 import "@fontsource/roboto/latin-500.css";
 import "@fontsource/roboto/latin-700.css";
 import "@fontsource/roboto/latin-ext-400.css";
 import "@fontsource/roboto/latin-ext-500.css";
 import "@fontsource/roboto/latin-ext-700.css";
-function E(e) {
+function D(e) {
   return e && typeof e == "object" && e.palette && typeof e.palette.getContrastText == "function";
 }
 function R(e) {
-  return E(e) && e.__isUxTheme__ === !0;
+  return D(e) && e.__isUxTheme__ === !0;
 }
-function h(e, t = /* @__PURE__ */ new Set()) {
+function u(e, t = /* @__PURE__ */ new Set()) {
   return !e || typeof e != "object" || (typeof e.fontFamily == "string" && e.fontFamily.replace(/"/g, "").split(",").map((o) => o.trim()).filter(Boolean).forEach((o) => t.add(o)), Object.values(e).forEach((o) => {
-    typeof o == "object" && h(o, t);
+    typeof o == "object" && u(o, t);
   })), t;
 }
-const l = new Set(_.concat("inherit"));
-function D(e) {
-  const t = e.filter((n) => !l.has(n));
+const a = new Set(b.concat("inherit"));
+function w(e) {
+  const t = e.filter((r) => !a.has(r));
   if (t.length === 0)
     return Promise.resolve(!0);
-  t.forEach((n) => l.add(n));
+  t.forEach((r) => a.add(r));
   const o = t.length - 1;
-  return t[o] = `${t[o]}&display=swap`, new Promise((n) => {
-    A.load({
+  return t[o] = `${t[o]}&display=swap`, new Promise((r) => {
+    _.load({
       google: {
         families: t
       },
-      active: () => n(!0),
-      inactive: () => n(!0),
-      fontinactive: (r, i) => {
-        l.delete(r), console.warn(`font ${r} ${i} download failed`);
+      active: () => r(!0),
+      inactive: () => r(!0),
+      fontinactive: (n, i) => {
+        a.delete(n), console.warn(`font ${n} ${i} download failed`);
       }
     });
   });
 }
-function u(e = "light") {
-  return e === "dark" ? k : x;
+function T(e = "light") {
+  return e === "dark" ? x : E;
 }
-function w(e) {
+function v(e) {
   let t = null;
   return () => {
     if (t) return t;
-    const o = f(u(e), d(e));
-    return t = p(o), t;
+    const o = d(T(e), h(e));
+    return t = f(o), t;
   };
 }
-const m = ({ palette: e, components: t, overrides: o, ...n }) => ({
+const p = ({ palette: e, components: t, overrides: o, ...r }) => ({
   palette: e,
   components: {
     ...o,
     ...t
   },
-  ...n
-}), v = {
+  ...r
+}), L = {
   themeName: "ArcBlock",
   pageWidth: "md",
   disableBlockletTheme: !1,
@@ -83,25 +83,24 @@ const m = ({ palette: e, components: t, overrides: o, ...n }) => ({
     danger: "#D0021B",
     lightGrey: "#BCBCBC"
   }
-}, L = (...e) => {
-  const t = b(), o = w(t), n = e.reduce(
-    (B, a) => f(B, m(typeof a == "function" ? a(o()) : a)),
-    m(v)
-  ), r = n.mode || n.palette?.mode || t, i = d(r), T = u(r), { disableBlockletTheme: g } = n, F = C(
+}, U = (...e) => {
+  const t = C(), o = v(t), r = e.reduce(
+    (O, s) => d(O, p(typeof s == "function" ? s(o()) : s)),
+    p(L)
+  ), n = r.mode || r.palette?.mode || t, i = h(n), g = T(n), { disableBlockletTheme: F } = r, y = k(
     [
-      T,
-      !g && c(i),
-      c(n),
+      g,
+      !F && m(i),
+      m(r),
       // 确保 mode 跟 prefer 一致
       {
-        mode: r,
-        palette: { mode: r }
+        mode: n,
+        palette: { mode: n }
       }
     ].filter(Boolean)
-  ), s = p(F);
-  s.__isUxTheme__ = !0;
-  const y = h(s.typography);
-  return D(Array.from(y)), O(s, {
+  ), l = f(y);
+  l.__isUxTheme__ = !0;
+  const c = A(l, {
     breakpoints: ["xs", "sm", "md", "lg"],
     disableAlign: !1,
     factor: 3,
@@ -120,17 +119,18 @@ const m = ({ palette: e, components: t, overrides: o, ...n }) => ({
       "button",
       "overline"
     ]
-  });
-}, W = L;
+  }), B = u(c.typography);
+  return w(Array.from(B)), c;
+}, W = U;
 export {
-  h as collectFontFamilies,
-  L as create,
-  u as createDefaultThemeOptions,
+  u as collectFontFamilies,
+  U as create,
+  T as createDefaultThemeOptions,
   W as createTheme,
   Q as deepmerge,
   V as deepmergeAll,
-  E as isTheme,
+  D as isTheme,
   R as isUxTheme,
-  w as lazyCreateDefaultTheme,
-  D as loadFonts
+  v as lazyCreateDefaultTheme,
+  w as loadFonts
 };

package/lib/Util/logger.js

@@ -1,18 +1,21 @@
 import n from "debug";
-const c = n, u = (o) => new Proxy(window.console, {
+const d = n;
+let t = !1;
+const u = () => {
+  t || (t = !0, window.blocklet?.ENABLE_DEBUG_TMP === "false" ? n.disable() : window.blocklet?.ENABLE_DEBUG_TMP && n.enable(window.blocklet?.ENABLE_DEBUG_TMP));
+}, b = (i) => (u(), new Proxy(window.console, {
   get(r, e) {
-    return (...i) => {
+    return (...o) => {
       try {
-        return ["log", "debug", "info", "warn", "error"].includes(e) ? r[e](o, ...i) : r[e] instanceof Function ? r[e](...i) : r[e];
+        return ["log", "debug", "info", "warn", "error"].includes(e) ? r[e](i, ...o) : r[e] instanceof Function ? r[e](...o) : r[e];
       } catch (l) {
-        console.error(`Logger error in ${o}:`, l);
+        console.error(`Logger error in ${i}:`, l);
         return;
       }
     };
   }
-});
-window.blocklet?.ENABLE_DEBUG_TMP === "false" ? n.disable() : window.blocklet?.ENABLE_DEBUG_TMP && n.enable(window.blocklet?.ENABLE_DEBUG_TMP);
+}));
 export {
-  c as createDebug,
-  u as createLogger
+  d as createDebug,
+  b as createLogger
 };

package/lib/hooks/use-clock.js

@@ -1,10 +1,10 @@
 import { useCallback as p, useState as l, useEffect as d } from "react";
 import e from "dayjs";
+import "dayjs/locale/zh-cn";
+import "dayjs/locale/en";
 import h from "dayjs/plugin/utc";
 import T from "dayjs/plugin/timezone";
 import z from "dayjs/plugin/localizedFormat";
-import "dayjs/locale/zh-cn";
-import "dayjs/locale/en";
 import { formatToDatetime as I } from "../Util/index.js";
 e.extend(h);
 e.extend(T);

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.4.6", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
+const e = "3.4.7", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
   version: e,
   dependencies: s
 };

package/lib/withTracker/index.js

@@ -1,26 +1,28 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useLocation as f } from "react-router-dom";
-import { useMount as s, useDeepCompareEffect as u } from "ahooks";
-import r from "react-ga4";
-import { default as A } from "react-ga4";
+import { jsx as f } from "react/jsx-runtime";
+import { useLocation as u } from "react-router-dom";
+import { useMount as l, useDeepCompareEffect as d } from "ahooks";
+import i from "react-ga4";
+import { default as E } from "react-ga4";
 import { googleAnalyticsMeasurementId as n } from "./env.js";
-n && r.initialize(n);
-const h = (i) => {
+let r = !1;
+const c = () => {
+  n && !r && (i.initialize(n), r = !0);
+}, x = (m) => {
   const a = (o, t = document.title) => {
-    n && r.send({ hitType: "pageview", page: o, title: t });
-  }, c = (o, t, e, m) => {
-    n && r.event({ category: o, action: t, label: e, value: m, transport: "beacon" });
+    c(), n && i.send({ hitType: "pageview", page: o, title: t });
+  }, s = (o, t, e, p) => {
+    c(), n && i.event({ category: o, action: t, label: e, value: p, transport: "beacon" });
   };
-  return window.trackPage = a, window.trackEvent = c, function(t) {
-    const e = f();
-    return s(() => {
+  return window.trackPage = a, window.trackEvent = s, function(t) {
+    const e = u();
+    return l(() => {
       a(e.pathname);
-    }), u(() => {
+    }), d(() => {
       a(e.pathname);
-    }, [e.pathname]), /* @__PURE__ */ p(i, { ...t });
+    }, [e.pathname]), /* @__PURE__ */ f(m, { ...t });
   };
 };
 export {
-  A as ReactGA,
-  h as default
+  E as ReactGA,
+  x as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -30,6 +30,12 @@
   "bugs": {
     "url": "https://github.com/ArcBlock/ux/issues"
   },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.svg?react",
+    "**/*.svg"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -68,16 +74,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "aea3f5520b4d9ba35ef714a8036eb8f4994ce733",
+  "gitHead": "eb0fca0015ba4ee80affb3b03d47505c45f8ec1c",
   "dependencies": {
-    "@arcblock/bridge": "3.4.6",
-    "@arcblock/did": "^1.28.2",
+    "@arcblock/bridge": "3.4.7",
+    "@arcblock/did": "^1.28.5",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.4.6",
-    "@arcblock/nft-display": "3.4.6",
-    "@arcblock/react-hooks": "3.4.6",
+    "@arcblock/icons": "3.4.7",
+    "@arcblock/nft-display": "3.4.7",
+    "@arcblock/react-hooks": "3.4.7",
     "@blocklet/js-sdk": "^1.17.7",
-    "@blocklet/theme": "3.4.6",
+    "@blocklet/theme": "3.4.7",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -85,7 +91,7 @@
     "@iconify-icons/mdi": "^1.2.48",
     "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^5.2.1",
-    "@ocap/mcrypto": "^1.28.2",
+    "@ocap/mcrypto": "^1.28.5",
     "@solana/qr-code-styling": "^1.6.0",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",

package/src/AnimationWaiter/index.jsx

@@ -1,12 +1,13 @@
-import { useState, useEffect, useRef } from 'react';
+import { lazy, Suspense, useState, useEffect, useRef } from 'react';
 import { Skeleton } from '@mui/material';
 
 import PropTypes from 'prop-types';
-import Lottie from 'react-lottie-player';
 import noop from 'lodash/noop';
 
 import { styled, useTheme } from '../Theme';
 
+const Lottie = lazy(() => import('react-lottie-player'));
+
 /**
  * 用于长时间等待的用的动画组件
  * 动画会随着时间的变化而逐步加快播放速度，好适应用户的等待心理
@@ -147,24 +148,33 @@ export default function AnimationWaiter({
     return className;
   };
 
+  const fallback = (
+    <div style={{ width: size, height: size, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <Skeleton variant="rounded" width={size * 0.4} height={size * 0.4} />
+    </div>
+  );
+
   return (
     <Container {...rest}>
       {isLoading ? (
-        <div style={{ width: size, height: size, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-          <Skeleton variant="rounded" width={size * 0.4} height={size * 0.4} />
-        </div>
+        // 当正在加载默认动画时直接展示 fallback
+        fallback
       ) : (
-        <Lottie
-          loop
-          animationData={animationData || defaultAnimation}
-          play
-          speed={currentSpeed}
-          style={{
-            width: size,
-            height: size,
-          }}
-        />
+        // 否则使用 Suspense 包裹懒加载的 Lottie，Suspense 会在 Lottie 本身未加载完成时展示 fallback
+        <Suspense fallback={fallback}>
+          <Lottie
+            loop
+            animationData={animationData || defaultAnimation}
+            play
+            speed={currentSpeed}
+            style={{
+              width: size,
+              height: size,
+            }}
+          />
+        </Suspense>
       )}
+
       {message && (
         <div className="waiter-message">
           {message.map((text, index) => {

package/src/Theme/theme.ts

@@ -186,10 +186,6 @@ export const create = (...args: Array<UxThemeOptions | ((baseTheme: Theme) => Ux
   const theme = _createTheme(mergedThemeOptions);
   theme.__isUxTheme__ = true;
 
-  // 异步加载字体
-  const fonts = collectFontFamilies(theme.typography);
-  loadFonts(Array.from(fonts));
-
   /**
    * 支持响应式字体，theme.typography.$variant 中会添加 @media 分支，比如
    * {
@@ -222,6 +218,10 @@ export const create = (...args: Array<UxThemeOptions | ((baseTheme: Theme) => Ux
     ],
   });
 
+  // 异步加载字体
+  const fonts = collectFontFamilies(enhanced.typography);
+  loadFonts(Array.from(fonts));
+
   return enhanced;
 };
 

package/src/Util/logger.ts

@@ -3,7 +3,24 @@ import debug from 'debug';
 
 export const createDebug = debug;
 
+let debugInitialized = false;
+
+const initializeDebug = () => {
+  if (debugInitialized) {
+    return;
+  }
+  debugInitialized = true;
+
+  if (window.blocklet?.ENABLE_DEBUG_TMP === 'false') {
+    debug.disable();
+  } else if (window.blocklet?.ENABLE_DEBUG_TMP) {
+    debug.enable(window.blocklet?.ENABLE_DEBUG_TMP);
+  }
+};
+
 export const createLogger = (namespace: string) => {
+  initializeDebug();
+
   return new Proxy(window.console, {
     get(target, prop: keyof Console) {
       return (...args: any[]) => {
@@ -25,9 +42,3 @@ export const createLogger = (namespace: string) => {
     },
   });
 };
-
-if (window.blocklet?.ENABLE_DEBUG_TMP === 'false') {
-  debug.disable();
-} else if (window.blocklet?.ENABLE_DEBUG_TMP) {
-  debug.enable(window.blocklet?.ENABLE_DEBUG_TMP);
-}

package/src/hooks/use-clock.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect, useCallback } from 'react';
 import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
 import utc from 'dayjs/plugin/utc';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
-import 'dayjs/locale/zh-cn';
-import 'dayjs/locale/en';
 
 import { formatToDatetime } from '../Util';
 

package/src/withTracker/index.tsx

@@ -3,19 +3,27 @@ import { useMount, useDeepCompareEffect } from 'ahooks';
 import ReactGA from 'react-ga4';
 import { googleAnalyticsMeasurementId } from './env';
 
-if (googleAnalyticsMeasurementId) {
-  ReactGA.initialize(googleAnalyticsMeasurementId);
-}
+let isInitialized = false;
+
+const initializeGA = () => {
+  if (googleAnalyticsMeasurementId && !isInitialized) {
+    ReactGA.initialize(googleAnalyticsMeasurementId);
+    isInitialized = true;
+  }
+};
 
 export { ReactGA };
+
 export default <P extends object>(WrappedComponent: React.ComponentType<P>) => {
   const trackPage = (page: string, title = document.title) => {
+    initializeGA();
     if (googleAnalyticsMeasurementId) {
       ReactGA.send({ hitType: 'pageview', page, title });
     }
   };
 
   const trackEvent = (category: string, action: string, label: string, value: number) => {
+    initializeGA();
     if (googleAnalyticsMeasurementId) {
       ReactGA.event({ category, action, label, value, transport: 'beacon' });
     }