fix: add load timeout + error/retry fallback to Wistia embeds

[posthog]

Changes

Users watching PostHog's demo and AI product videos could get stuck on a loading spinner forever, with no error and no way to recover. The /demo window (a Wistia MediaPlayer, opened by a large number of unique users daily) and the /ai product demos (WistiaVideo) share the same defect.

All three Wistia embed components (MediaPlayer, WistiaVideo, WistiaCustomPlayer) initialized the player the same fragile way: load E-v1.js and wait for a one-shot onReady callback (or an unbounded 100ms poll) with no timeout, no error state, and no retry. When Wistia's script is blocked (common with ad blockers, which PostHog's developer-heavy audience runs at high rates) or onReady/api() never fires, the container just spins forever.

This PR:

• Adds a shared useWistiaPlayer hook that owns deduplicated script loading (now with a script error handler), a single timeout covering the whole load → ready window, a retry(), and a posthog.capture('wistia_video_load_failed', …) on failure — so this previously-invisible stuck state becomes measurable.
• Adds a shared WistiaError fallback UI (a "Try again" retry action plus a direct link to the video) rendered when the load fails, replacing the eternal spinner with a recoverable error state.
• Wires all three components to the hook, removing their duplicated inline script-loading logic.

The /demo case is a fresh regression from #18241 (commit dcd0fe2), which swapped /demo to the Wistia MediaPlayer two days before the report.

Verification

The change is a direct fix to the exact components and symptom in the report and typechecks cleanly under the project tsconfig. I was not able to run a live browser reproduction in the sandbox (no dependencies installed, no browser, and Gatsby needs the full 16GB just to build), so this needs a visual check in the Vercel preview.

To reproduce/verify manually: open the /demo window (and /ai demos), block fast.wistia.com in devtools' network request-blocking (or enable an ad blocker), and confirm that after the timeout the spinner is replaced by the error/retry fallback instead of spinning forever — and that "Try again" re-attempts the load.

Add screenshots or screen recordings for visual / UI-focused changes.

Checklist

• I've read the docs and/or content style guides.
• Words are spelled using American English
• Use relative URLs for internal links
• I've checked the pages added or changed in the Vercel preview build
• If I moved a page, I added a redirect in vercel.json

---

Created with PostHog Code from an inbox report.

[github-actions]

Deploy preview

Status	Details	Updated (UTC)
🟢 Ready	View preview	Jul 12, 2026 09:15PM

[github-actions]

Vale prose linter → found 0 errors, 4 warnings, 0 suggestions in your markdown

Full report → Copy the linter results into an LLM to batch-fix issues.

Linter being weird? Update the rules!

src/components/WistiaError/README.md — 0 errors, 4 warnings, 0 suggestions

Line	Severity	Message	Rule
3:33	warning	'Wistia' is a possible misspelling.	PostHogBase.Spelling
4:54	warning	'Wistia's' is a possible misspelling.	PostHogBase.Spelling
9:66	warning	'Wistia' is a possible misspelling.	PostHogBase.Spelling
47:32	warning	'Wistia' is a possible misspelling.	PostHogBase.Spelling

[github-actions]

Bundle report

Total JS (gzip)

6.30 MiB (+1.5 KiB / +0.0%)

Largest changed named chunks

Chunk	Gzip	Δ vs master
app.js	1987.0 KiB	+1.3 KiB / +0.1%

Eager graph (modules shipped in each entrypoint's initial chunks)

Entrypoint	Eager size	Budget	Modules
✅ app	15.57 MiB (+6.0 KiB / +0.0%)	report-only	1943

Largest modules in the app closure

Module	Size
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css	709.6 KiB
./src/components/Stickers/Stickers.tsx	696.4 KiB
./.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/31a094f140f119e73085d847ae81b99b.js + 2 modules	614.1 KiB
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js	481.4 KiB
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules	395.1 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.cjs.js	364.8 KiB
./src/hooks/useCustomers.tsx + 54 modules	355.1 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js	354.8 KiB
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules	351.4 KiB
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js	281.9 KiB
./src/components/ProductComparisonTable/index.tsx + 118 modules	275.6 KiB
./node_modules/.pnpm/d3@7.9.0/node_modules/d3/src/index.js + 208 modules	247.4 KiB
./src/components/Pricing/PricingSlider/Slider.tsx + 87 modules	239.9 KiB
./gatsby-browser.tsx + 41 modules	239.8 KiB
./src/components/SearchUI/index.tsx + 73 modules	223.4 KiB

---

Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes for the modules actually shipped in the entrypoint's initial chunks (post-tree-shake).