fix(analytics): stop preview_loaded firing on every regeneration

src/Ergogen.test.tsx

@@ -133,3 +133,107 @@ describe('Ergogen Subheader Buttons', () => {
     );
   });
 });
+
+describe('Ergogen preview_loaded tracking', () => {
+  const baseContext = {
+    configs: [],
+    activeConfigId: '1',
+    activeConfigName: 'My Awesome Board',
+    isPreview: false,
+    results: null as Record<string, unknown> | null,
+    configInput: 'points: {}',
+    injectionInput: [],
+    debug: false,
+    stlPreview: false,
+    isGenerating: false,
+    isJscadConverting: false,
+    showSettings: false,
+    showSideNav: false,
+    showConfig: true,
+    showDownloads: false,
+    setShowSettings: jest.fn(),
+    setShowSideNav: jest.fn(),
+    setShowConfig: jest.fn(),
+    setShowDownloads: jest.fn(),
+    generateNow: jest.fn(),
+  };
+
+  const countPreviewLoadedCalls = () =>
+    mockTrackEvent.mock.calls.filter(([name]) => name === 'preview_loaded')
+      .length;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('fires preview_loaded once when results first become available', () => {
+    // Arrange
+    (useConfigContext as jest.Mock).mockReturnValue(baseContext);
+    const { rerender } = render(<Ergogen />);
+
+    // Act
+    (useConfigContext as jest.Mock).mockReturnValue({
+      ...baseContext,
+      results: { demo: { svg: '<svg />' } },
+    });
+    rerender(<Ergogen />);
+
+    // Assert
+    expect(countPreviewLoadedCalls()).toBe(1);
+    expect(mockTrackEvent).toHaveBeenCalledWith('preview_loaded', {
+      preview_type: 'svg',
+      preview_key: 'demo.svg',
+    });
+  });
+
+  it('does not re-fire preview_loaded when results regenerate for the same preview', () => {
+    // Arrange
+    (useConfigContext as jest.Mock).mockReturnValue({
+      ...baseContext,
+      results: { demo: { svg: '<svg />' } },
+    });
+    const { rerender } = render(<Ergogen />);
+    expect(countPreviewLoadedCalls()).toBe(1);
+
+    // Act: simulate several auto-generation / STL completion cycles, each
+    // producing a new results object for the unchanged preview.
+    for (let i = 0; i < 3; i++) {
+      (useConfigContext as jest.Mock).mockReturnValue({
+        ...baseContext,
+        results: { demo: { svg: `<svg data-run="${i}" />` } },
+      });
+      rerender(<Ergogen />);
+    }
+
+    // Assert
+    expect(countPreviewLoadedCalls()).toBe(1);
+  });
+
+  it('fires preview_loaded again after results are cleared, e.g. when switching configs', () => {
+    // Arrange: a config is loaded and its preview has been tracked.
+    (useConfigContext as jest.Mock).mockReturnValue({
+      ...baseContext,
+      results: { demo: { svg: '<svg />' } },
+    });
+    const { rerender } = render(<Ergogen />);
+    expect(countPreviewLoadedCalls()).toBe(1);
+
+    // Act: selecting, creating or duplicating a config clears the results
+    // before the new config generates, while Ergogen stays mounted.
+    (useConfigContext as jest.Mock).mockReturnValue({
+      ...baseContext,
+      activeConfigId: '2',
+      results: null,
+    });
+    rerender(<Ergogen />);
+    (useConfigContext as jest.Mock).mockReturnValue({
+      ...baseContext,
+      activeConfigId: '2',
+      results: { demo: { svg: '<svg data-config="2" />' } },
+    });
+    rerender(<Ergogen />);
+
+    // Assert
+    expect(countPreviewLoadedCalls()).toBe(2);
+  });
+});

src/Ergogen.tsx

@@ -1,5 +1,6 @@
 import {
   useEffect,
+  useRef,
   useState,
   ChangeEvent,
   SetStateAction,
@@ -407,15 +408,29 @@ const Ergogen = ({ pwaState }: ErgogenProps) => {
     configContext?.setInjectionInput(injections);
   }, [configContext, injectionToEdit]);
 
-  // Track preview changes
+  // Track preview changes.
+  // `results` is replaced on every (auto-)generation and STL conversion, so we
+  // remember the last tracked preview and only fire when the user actually
+  // switches to a different file, rather than on every regeneration.
+  // Results are cleared (set to null) when a config is selected, created,
+  // duplicated or loaded from a shared link, so we reset the memory then to
+  // track the first preview of the newly loaded config.
+  const lastTrackedPreviewRef = useRef<string | null>(null);
+  const hasResults = Boolean(configContext?.results);
   useEffect(() => {
-    if (configContext?.results && preview.key && preview.extension) {
-      trackEvent('preview_loaded', {
-        preview_type: preview.extension,
-        preview_key: preview.key,
-      });
+    if (!hasResults) {
+      lastTrackedPreviewRef.current = null;
+      return;
     }
-  }, [preview.key, preview.extension, configContext?.results]);
+    if (!preview.key || !preview.extension) return;
+    const previewId = `${preview.key}|${preview.extension}`;
+    if (lastTrackedPreviewRef.current === previewId) return;
+    lastTrackedPreviewRef.current = previewId;
+    trackEvent('preview_loaded', {
+      preview_type: preview.extension,
+      preview_key: preview.key,
+    });
+  }, [preview.key, preview.extension, hasResults]);
 
   if (!configContext) return null;
   let result = null;