Prevent page flicker after burn

Author: jsoningram

src/app/page.tsx

@@ -28,6 +28,8 @@ import {
   ZENDESK_SEND_BUTTON_IDENTIFIER,
   ZENDESK_YES_BUTTON_IDENTIFIER,
   ZENDESK_NO_BUTTON_IDENTIFIER,
+  ZENDESK_SCRIPT_TAG_ID,
+  ZENDESK_HIDDEN_IFRAME_SELECTOR,
 } from '@/constants/zendesk-selectors';
 import { ZENDESK_IFRAME_STYLES } from '@/constants/zendesk-styles';
 import { getCSSVariable } from '@/utils/get-css-variable';
@@ -140,7 +142,43 @@ export default function Home() {
       behavior: prefersReducedMotion ? 'auto' : 'smooth',
     });
 
-    window.location.reload();
+    // Clear contents of messaging-container div (Zendesk iframe, etc.)
+    const messagingContainer = document.getElementById(EMBEDDED_TARGET_ELEMENT);
+    if (messagingContainer) {
+      messagingContainer.innerHTML = '';
+    }
+
+    // Remove hidden Zendesk iframe (data-product="web_widget")
+    const hiddenIframe = document.querySelector(ZENDESK_HIDDEN_IFRAME_SELECTOR);
+    if (hiddenIframe) {
+      hiddenIframe.remove();
+    }
+
+    // Remove ze-snippet script element
+    const zeSnippet = document.getElementById(ZENDESK_SCRIPT_TAG_ID);
+    if (zeSnippet) {
+      zeSnippet.remove();
+    }
+
+    // Clean up Zendesk global objects
+    if (typeof window !== 'undefined') {
+      // Remove zE function if it exists
+      try {
+        delete (window as unknown as { zE?: unknown }).zE;
+      } catch {
+        // Ignore errors if zE is not configurable
+      }
+
+      // Remove zEMessenger if it exists
+      try {
+        delete (window as unknown as { zEMessenger?: unknown }).zEMessenger;
+      } catch {
+        // Ignore errors if zEMessenger is not configurable
+      }
+    }
+
+    // Stop burn animation
+    setIsBurning(false);
   }, []);
 
   const handleOnError = useCallback((e: Error) => {
@@ -236,7 +274,7 @@ export default function Home() {
       </main>
       {loadWidget && (
         <Script
-          id="ze-snippet"
+          id={ZENDESK_SCRIPT_TAG_ID}
           src={ZENDESK_SCRIPT_URL}
           onLoad={handleOnLoad}
           onError={handleOnError}

src/constants/zendesk-selectors.ts

@@ -49,3 +49,14 @@ export const ZENDESK_BUTTON_DATA_ATTR = 'buttons.button';
  * Data attribute value for icon button elements
  */
 export const ZENDESK_ICON_BUTTON_DATA_ATTR = 'buttons.icon_button';
+
+/**
+ * Zendesk script tag
+ */
+export const ZENDESK_SCRIPT_TAG_ID = 'ze-snippet';
+
+/**
+ * Selector for the hidden iframe. Used when resetting the chat
+ */
+export const ZENDESK_HIDDEN_IFRAME_SELECTOR =
+  'iframe[data-product="web_widget"][aria-hidden="true"]';

src/tests/integration/complete-flow.test.ts

@@ -462,8 +462,8 @@ test.describe('Complete Zendesk Widget Flow', () => {
     await expect(confirmButton).toBeVisible();
     await confirmButton.click();
 
-    // Wait for page reload (burn animation completes)
-    // The reload happens after ZENDESK_RESET_DELAY_MS (1000ms) + burn animation
+    // Wait for page reset (burn animation completes)
+    // The reset happens after ZENDESK_RESET_DELAY_MS (1000ms) + burn animation
     await page.waitForLoadState('networkidle');
 
     // Verify we're back at the chat screen (consent is persisted, so "New Chat"
@@ -474,8 +474,8 @@ test.describe('Complete Zendesk Widget Flow', () => {
     await expect(page.getByTestId(LOAD_ZD_BUTTON_TEST_ID)).toBeVisible();
 
     // Verify storage is cleared (except consent which persists)
-    // @note: Storage clearing happens in resetWidget callback before reload.
-    // After reload, localStorage should only contain ddg_consent. All other
+    // @note: Storage clearing happens in resetWidget callback before reset.
+    // After reset, localStorage should only contain ddg_consent. All other
     // keys should be removed. We verify that our test keys are gone and only
     // consent remains, which confirms the clear() was called.
     const storageState = await page.evaluate(() => {
@@ -533,7 +533,7 @@ test.describe('Complete Zendesk Widget Flow', () => {
       // Verify only ddg_consent remains
       expect(storageStateRetry.localStorage.count).toBe(1);
     } else {
-      // Storage was cleared before reload - verify it's still cleared
+      // Storage was cleared before reset - verify it's still cleared
       expect(storageState.localStorage.hasTestKey).toBe(false);
       expect(storageState.sessionStorage.hasTestKey).toBe(false);
       // SessionStorage should be completely empty
@@ -546,8 +546,7 @@ test.describe('Complete Zendesk Widget Flow', () => {
       expect(storageState.localStorage.count).toBe(1);
     }
 
-    // After reload and state reset, loadWidget should be false, so no widget
-    // should render
+    // After state reset, loadWidget should be false, so no widget should render
     const widgetRendered = await page.evaluate(() => {
       const container = document.querySelector('#messaging-container');