⚡ Performance: Defer Microsoft Clarity (#1748)

* refactor(MicrosoftClarity): simplify component structure and improve script loading

* feat(useInteractionScriptLoader): add mousemove event listener for improved script loading on user interactions

* feat(useInteractionScriptLoader): add keydown event listener for enhanced script loading on user interactions

* docs(MicrosoftClarity): add comments to clarify the queue pattern for script loading

* refactor(MicrosoftClarity): remove redundant comment in component return statement

* refactor(MicrosoftClarity): clean up import statement for consistency

Author: adriangohjw

packages/components/src/engine/renderApplicationScripts.tsx

@@ -45,10 +45,7 @@ export const RenderApplicationScripts = ({
       )}
 
       {!!site.isomerMsClarityId && (
-        <MicrosoftClarity
-          msClarityId={site.isomerMsClarityId}
-          ScriptComponent={ScriptComponent}
-        />
+        <MicrosoftClarity msClarityId={site.isomerMsClarityId} />
       )}
 
       {/* Ensures that the webchat widget only loads after the page has loaded */}

packages/components/src/hooks/useInteractionScriptLoader.ts

@@ -21,10 +21,12 @@ export const useInteractionScriptLoader = ({
 
   const triggerLoad = () => setShouldLoad(true)
 
-  // Load script on user interactions (scroll, click, touchstart)
+  // Load script on user interactions (scroll, click, touchstart, mousemove, keydown)
   useEventListener("scroll", triggerLoad, documentRef, { passive: true })
   useEventListener("click", triggerLoad, documentRef) // as we might need to call preventDefault
   useEventListener("touchstart", triggerLoad, documentRef, { passive: true })
+  useEventListener("mousemove", triggerLoad, documentRef, { passive: true })
+  useEventListener("keydown", triggerLoad, documentRef, { passive: true })
 
   // Load script after timeout if user doesn't interact
   useTimeout(triggerLoad, timeout)

packages/components/src/interfaces/internal/MicrosoftClarity.ts

@@ -1,6 +1,5 @@
-import type { IsomerSiteProps, ScriptComponentType } from "~/types"
+import type { IsomerSiteProps } from "~/types"
 
 export interface MicrosoftClarityProps {
   msClarityId: NonNullable<IsomerSiteProps["isomerMsClarityId"]>
-  ScriptComponent?: ScriptComponentType
 }

packages/components/src/templates/next/components/internal/MicrosoftClarity/MicrosoftClarity.tsx

@@ -1,20 +1,36 @@
+"use client"
+
+import { useEffect } from "react"
+
 import type { MicrosoftClarityProps } from "~/interfaces"
+import { useInteractionScriptLoader } from "~/hooks/useInteractionScriptLoader"
+
+export const MicrosoftClarity = ({ msClarityId }: MicrosoftClarityProps) => {
+  // Step 1: insert the tiny inline init function
+  // If code calls window.clarity() before the script loads, it would fail because window.clarity doesn't exist yet.
+  // The function below (taken from the Clarity docs) implements a queue pattern:
+  // 1. Creates a placeholder window.clarity function that queues calls
+  // 2. Stores calls in window.clarity.q array
+  // 3. When the real Clarity script loads, it processes all queued calls
+  useEffect(() => {
+    // to not render during static site generation on the server
+    if (typeof window === "undefined") return
+
+    // @ts-expect-error - Clarity is not typed
+    if (!window.clarity) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+      ;(window as any).clarity = function () {
+        // @ts-expect-error - Clarity is not typed
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, prefer-rest-params
+        ;(window.clarity.q = window.clarity.q || []).push(arguments)
+      }
+    }
+  }, [])
+
+  // Step 2: delayed loader for the actual Clarity script
+  useInteractionScriptLoader({
+    src: `https://www.clarity.ms/tag/${msClarityId}`,
+  })
 
-export const MicrosoftClarity = ({
-  msClarityId,
-  ScriptComponent,
-}: MicrosoftClarityProps) => {
-  return (
-    <ScriptComponent
-      id={`_next-ms-clarity-init-${msClarityId}`}
-      strategy="afterInteractive" // next/script's default but just in case Vercel changes it in the future
-      dangerouslySetInnerHTML={{
-        __html: `(function(c,l,a,r,i,t,y){
-          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-        })(window, document, "clarity", "script", "${msClarityId}");`,
-      }}
-    />
-  )
+  return null
 }