⚡️(frontend) defer loading the Crisp script until idle

Load the Crisp JavaScript module only once the frontend is idle,
instead of during the initial page load.

Keeps the critical path lighter and prevents Crisp from competing
with the app's own bootstrap for network and CPU on slow devices.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 - 📈(frontend) include LiveKit SIDs in the connection analytics event
 - 🔇(backend) silence expected 401 warnings on /me
 - 🔇(backend) silence noisy request summary info logs
+- ⚡️(frontend) defer loading the Crisp script until idle
 
 ### Fixed
 

src/backend/meet/settings.py

@@ -469,6 +469,9 @@ class Base(Configuration):
 
     # Sentry
     SENTRY_DSN = values.Value(None, environ_name="SENTRY_DSN")
+    SENTRY_TRACES_SAMPLE_RATE = values.FloatValue(
+        0.0, environ_name="SENTRY_TRACES_SAMPLE_RATE", environ_prefix=None
+    )
 
     # Easy thumbnails
     THUMBNAIL_EXTENSION = "webp"
@@ -1230,7 +1233,14 @@ class Base(Configuration):
                 dsn=cls.SENTRY_DSN,
                 environment=cls.__name__.lower(),  # build, test, development, production
                 release=get_release(),
-                integrations=[DjangoIntegration()],
+                traces_sample_rate=cls.SENTRY_TRACES_SAMPLE_RATE,
+                integrations=[
+                    DjangoIntegration(
+                        transaction_style="url",
+                        middleware_spans=True,
+                        cache_spans=True,
+                    )
+                ],
             )
             sentry_sdk.set_tag("application", "backend")
 

src/frontend/src/features/rooms/livekit/components/controls/Options/SupportMenuItem.tsx

@@ -2,23 +2,20 @@ import { RiQuestionLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { Crisp } from 'crisp-sdk-web'
-import { useIsSupportEnabled } from '@/features/support/hooks/useSupport'
+import { useIsSupportEnabled, openSupportChat } from '@/features/support/hooks/useSupport'
 
 export const SupportMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
   const isSupportEnabled = useIsSupportEnabled()
 
-  if (!isSupportEnabled || !Crisp) {
+  if (!isSupportEnabled) {
     return
   }
 
   return (
     <MenuItem
       className={menuRecipe({ icon: true, variant: 'dark' }).item}
-      onAction={() => {
-        Crisp?.chat.open()
-      }}
+      onAction={openSupportChat}
     >
       <RiQuestionLine size={20} />
       {t('support')}

src/frontend/src/features/support/hooks/useSupport.tsx

@@ -1,20 +1,45 @@
-import { useEffect } from 'react'
-import { Crisp } from 'crisp-sdk-web'
+import { useEffect, useState } from 'react'
 import { type ApiUser } from '@/features/auth/api/ApiUser'
 import { useUser } from '@/features/auth/api/useUser'
 import { useConfig } from '@/api/useConfig'
 
+type CrispSdk = (typeof import('crisp-sdk-web'))['Crisp']
+
+let crisp: CrispSdk | undefined
+let crispPromise: Promise<CrispSdk> | undefined
+
+const loadCrisp = (): Promise<CrispSdk> => {
+  crispPromise ??= import('crisp-sdk-web')
+    .then((module) => {
+      crisp = module.Crisp
+      return module.Crisp
+    })
+    .catch((error) => {
+      crispPromise = undefined
+      throw error
+    })
+
+  return crispPromise
+}
+
+export const openSupportChat = () => {
+  if (!crisp?.isCrispInjected()) return
+  crisp.chat.open()
+}
+
 export const initializeSupportSession = (user: ApiUser) => {
-  if (!Crisp.isCrispInjected()) return
+  if (!crisp?.isCrispInjected()) return
+
   const { id, email } = user
-  Crisp.setTokenId(`meet-${id}`)
-  if (email) Crisp.user.setEmail(email)
+  crisp.setTokenId(`meet-${id}`)
+  if (email) crisp.user.setEmail(email)
 }
 
 export const terminateSupportSession = () => {
-  if (!Crisp.isCrispInjected()) return
-  Crisp.setTokenId()
-  Crisp.session.reset()
+  if (!crisp?.isCrispInjected()) return
+
+  crisp.setTokenId()
+  crisp.session.reset()
 }
 
 export type useSupportProps = {
@@ -22,26 +47,70 @@ export type useSupportProps = {
   isDisabled?: boolean
 }
 
-// Configure Crisp chat for real-time support across all pages.
+const IDLE_TIMEOUT_MS = 10_000
+
+const scheduleWhenIdle = (callback: () => void): (() => void) => {
+  if (typeof window.requestIdleCallback === 'function') {
+    const handle = window.requestIdleCallback(callback, {
+      timeout: IDLE_TIMEOUT_MS,
+    })
+    return () => window.cancelIdleCallback(handle)
+  }
+
+  const handle = window.setTimeout(callback, 1)
+  return () => window.clearTimeout(handle)
+}
+
 export const useSupport = ({ id, isDisabled }: useSupportProps) => {
   const { user } = useUser()
+  const [isInjected, setIsInjected] = useState(
+    () => crisp?.isCrispInjected() ?? false
+  )
 
   useEffect(() => {
-    if (!id || Crisp.isCrispInjected() || isDisabled) return
-    Crisp.configure(id)
-    Crisp.setHideOnMobile(true)
+    if (!id || isDisabled) return
+
+    if (crisp?.isCrispInjected()) {
+      setIsInjected(true)
+      return
+    }
+
+    let cancelled = false
+
+    const cancelIdle = scheduleWhenIdle(() => {
+      void loadCrisp()
+        .then((sdk) => {
+          if (cancelled) return
+
+          if (!sdk.isCrispInjected()) {
+            sdk.configure(id)
+            sdk.setHideOnMobile(true)
+          }
+
+          setIsInjected(true)
+        })
+        .catch((error) => {
+          if (!cancelled) {
+            console.error('Failed to initialize support chat', error)
+          }
+        })
+    })
+
+    return () => {
+      cancelled = true
+      cancelIdle()
+    }
   }, [id, isDisabled])
 
   useEffect(() => {
-    if (!user) return
+    if (!user || !isInjected || isDisabled) return
     initializeSupportSession(user)
-  }, [user])
+  }, [user, isInjected, isDisabled])
 
   return null
 }
 
-// Some users may block Crisp chat widget with browser ad blockers or anti-tracking plugins
-// So we need to safely check if Crisp is available and not blocked
+// Some users block the chat widget, so check its availability safely.
 const isCrispAvailable = () => {
   try {
     return !!window?.$crisp?.is

src/frontend/src/locales/de/rooms.json

@@ -480,7 +480,7 @@
       "destination": "Ein neues Dokument wird erstellt auf",
       "destinationUnknown": "Ein neues Dokument wird erstellt",
       "language": "Meeting-Sprache:",
-      "recording": "Auch eine Aufzeichnung starten"
+      "recording": "Auch eine Videoaufzeichnung starten"
     },
     "button": {
       "start": "Meeting-Transkription starten",

src/frontend/src/locales/en/rooms.json

@@ -480,7 +480,7 @@
       "destination": "A new document will be created on",
       "destinationUnknown": "A new document will be created",
       "language": "Meeting language:",
-      "recording": "Also start a recording"
+      "recording": "Also start a video recording"
     },
     "button": {
       "start": "Start transcribing the meeting",

src/frontend/src/locales/es/rooms.json

@@ -479,7 +479,7 @@
       "destination": "Se creará un nuevo documento en",
       "destinationUnknown": "Se creará un nuevo documento",
       "language": "Idioma de la reunión:",
-      "recording": "Iniciar también una grabación"
+      "recording": "Iniciar también una grabación de vídeo"
     },
     "button": {
       "start": "Empezar a transcribir la reunión",

src/frontend/src/locales/fr/rooms.json

@@ -480,7 +480,7 @@
       "destination": "Un nouveau document sera créé sur",
       "destinationUnknown": "Un nouveau document sera créé",
       "language": "Langue de la réunion :",
-      "recording": "Démarrer aussi un enregistrement"
+      "recording": "Démarrer aussi un enregistrement vidéo"
     },
     "button": {
       "start": "Commencer à transcrire la réunion",

src/frontend/src/locales/nl/rooms.json

@@ -480,7 +480,7 @@
       "destination": "Er wordt een nieuw document aangemaakt op",
       "destinationUnknown": "Een nieuw document wordt aangemaakt",
       "language": "Vergadertalen:",
-      "recording": "Start ook een opname"
+      "recording": "Start ook een video-opname"
     },
     "button": {
       "start": "Begin met het transcriberen van de vergadering",