fix(content-preview): Prevent stuck loading mask for custom previews

[jmcbgaston]

Description

Custom previews no longer start the preview loading state when the selected version changes. This prevents the loading mask from remaining over rendered content while preserving standard preview loading behavior.

Summary by CodeRabbit

• Bug Fixes

  • Custom content previews no longer attempt to load the standard preview library.
  • Updating a custom preview now avoids unnecessary loading states and preview reloads.
  • Preview cleanup continues to work correctly when custom preview versions change.

• Tests

  • Added regression coverage for custom preview updates and loading behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4b9517cb-c9e4-4a7c-87bb-8d96dffc7c4d

📥 Commits

Reviewing files that changed from the base of the PR and between 5d273fe and 28c8ef0.

📒 Files selected for processing (2)

• src/elements/content-preview/ContentPreview.js
• src/elements/content-preview/__tests__/ContentPreview.test.js

---

Walkthrough

ContentPreview.componentDidUpdate now skips Box Preview loading when renderCustomPreview is configured. A regression test verifies the custom preview update behavior.

Changes

Custom preview loading

Layer / File(s)	Summary
Skip Box Preview reloads for custom previews src/elements/content-preview/ContentPreview.js, src/elements/content-preview/__tests__/ContentPreview.test.js	componentDidUpdate bypasses Box Preview loading for custom previews. The test verifies preview destruction, isLoading: false, and no loadPreview() call.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• box/box-ui-elements#4391: Both modify ContentPreview.componentDidUpdate preview-loading control flow.
• box/box-ui-elements#4452: This change extends the custom preview behavior.
• box/box-ui-elements#4457: Both changes use the renderCustomPreview prop.

Suggested labels: ready-to-merge

Suggested reviewers: shahzadaziz, nefaris, jchan106

Poem

I’m a rabbit with previews to spare,
Custom content now needs no Box Preview care.
Updates stay calm, loading stays light,
Tests guard the behavior just right. 🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the custom preview loading-mask fix and matches the primary change.
Description check	✅ Passed	The description explains the custom preview behavior, the loading-mask issue, and the preserved standard preview behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Biome (2.5.6)

src/elements/content-preview/ContentPreview.js

File contains syntax errors that prevent linting: Line 21: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 36: 'import { type x ident }' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 67: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 68: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 69: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 70: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 71: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 72: 'import type' are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 73: '

... [truncated 19028 characters] ...

nly feature. Convert your file to a TypeScript file or remove the syntax.; Line 1601: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 1613: type annotation are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 1620: Type annotations are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.; Line 1652: expected ) but instead found :; Line 1652: Expected a JSX attribute but instead found ')'.; Line 1652: Unexpected token. Did you mean {'}'} or }?; Line 1652: Unexpected token. Did you mean {'>'} or >?; Line 1764: 'export type' declarations are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[jmcbgaston]

@Mergifyio queue

[mergify]

Merge Queue Status

• 🟠 Waiting for queue conditions
• ⏳ Enter queue
• ⏳ Run checks
• ⏳ Merge

Waiting for any of

• all of: [📌 queue conditions of queue rule Automatic boxmoji merge]
  • files ~= ^i18n/
  • title ~= ^fix\(i18n\):\supdate translations$
• all of: [📌 queue conditions of queue rule Automatic dependabot merge]
  • files ~= ^(package\.json|yarn\.lock)$
  • title ~= ^chore\(deps(-dev)?\):\sbump\s
• #approved-reviews-by >= 2

All conditions

• any of [🔀 queue conditions]:
  • all of [📌 queue conditions of queue rule Automatic boxmoji merge]:
    • author = boxmoji
    • files ~= ^i18n/
    • title ~= ^fix\(i18n\):\supdate translations$
    • github-review-approved [🛡 GitHub branch protection]
    • status-success = lint_test_build
    • any of [🛡 GitHub branch protection]:
      • check-success = Summary
      • check-neutral = Summary
      • check-skipped = Summary
    • any of [🛡 GitHub branch protection]:
      • check-success = lint_test_build
      • check-neutral = lint_test_build
      • check-skipped = lint_test_build
    • any of [🛡 GitHub branch protection]:
      • check-success = license/cla
      • check-neutral = license/cla
      • check-skipped = license/cla
    • any of [🛡 GitHub branch protection]:
      • check-success = lint_pull_request
      • check-neutral = lint_pull_request
      • check-skipped = lint_pull_request
  • all of [📌 queue conditions of queue rule Automatic dependabot merge]:
    • author = dependabot[bot]
    • files ~= ^(package\.json|yarn\.lock)$
    • title ~= ^chore\(deps(-dev)?\):\sbump\s
    • github-review-approved [🛡 GitHub branch protection]
    • status-success = lint_test_build
    • any of [🛡 GitHub branch protection]:
      • check-success = Summary
      • check-neutral = Summary
      • check-skipped = Summary
    • any of [🛡 GitHub branch protection]:
      • check-success = lint_test_build
      • check-neutral = lint_test_build
      • check-skipped = lint_test_build
    • any of [🛡 GitHub branch protection]:
      • check-success = license/cla
      • check-neutral = license/cla
      • check-skipped = license/cla
    • any of [🛡 GitHub branch protection]:
      • check-success = lint_pull_request
      • check-neutral = lint_pull_request
      • check-skipped = lint_pull_request
  • all of [📌 queue conditions of queue rule Automatic strict merge]:
    • #approved-reviews-by >= 2
    • #changes-requested-reviews-by = 0
    • github-review-approved [🛡 GitHub branch protection]
    • github-review-decision = APPROVED
    • label = ready-to-merge
    • status-success = lint_test_build
    • title ~= ^(build|ci|chore|docs|feat|fix|perf|refactor|revert|style|test)(\([^)]+\))?:\s.+$
    • any of [🛡 GitHub branch protection]:
      • check-success = Summary
      • check-neutral = Summary
      • check-skipped = Summary
    • any of [🛡 GitHub branch protection]:
      • check-success = lint_test_build
      • check-neutral = lint_test_build
      • check-skipped = lint_test_build
    • any of [🛡 GitHub branch protection]:
      • check-success = license/cla
      • check-neutral = license/cla
      • check-skipped = license/cla
    • any of [🛡 GitHub branch protection]:
      • check-success = lint_pull_request
      • check-neutral = lint_pull_request
      • check-skipped = lint_pull_request
  • all of [📌 queue conditions of queue rule Automatic ui-elements merge]:
    • author = @box/ui-elements
    • #changes-requested-reviews-by = 0
    • github-review-approved [🛡 GitHub branch protection]
    • github-review-decision = APPROVED
    • label = ready-to-merge
    • status-success = lint_test_build
    • title ~= ^(build|ci|chore|docs|feat|fix|perf|refactor|revert|style|test)(\([^)]+\))?:\s.+$
    • any of [🛡 GitHub branch protection]:
      • check-success = Summary
      • check-neutral = Summary
      • check-skipped = Summary
    • any of [🛡 GitHub branch protection]:
      • check-success = lint_test_build
      • check-neutral = lint_test_build
      • check-skipped = lint_test_build
    • any of [🛡 GitHub branch protection]:
      • check-success = license/cla
      • check-neutral = license/cla
      • check-skipped = license/cla
    • any of [🛡 GitHub branch protection]:
      • check-success = lint_pull_request
      • check-neutral = lint_pull_request
      • check-skipped = lint_pull_request
• -closed [📌 queue requirement]
• -conflict [📌 queue requirement]
• -draft [📌 queue requirement]
• any of [📌 queue -> configuration change requirements]:
  • -mergify-configuration-changed
  • check-success = Configuration changed