fix: Info panel briefly shows cached media content from previously selected cell when using pre-fetch

[mtrezza]

New Pull Request Checklist

• I am not disclosing a vulnerability.
• I am creating this PR in reference to an issue.

Issue Description

The issue is that the ImageElement, VideoElement, and AudioElement components are simple functional components that don't handle URL changes properly. When the URL prop changes (because a different row is selected), the browser may still cache and display the previous media content.

Approach

The solution is to add a key prop based on the URL to force React to unmount and remount the component when the URL changes.

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Improved stability and rendering consistency for collections of images, videos, and audio items in the aggregation panel.

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

📝 Walkthrough

Walkthrough

React element keys for media items (images, videos, audio) in the AggregationPanel component now incorporate the item URL alongside the index to ensure uniqueness, replacing index-only keys. Other item types remain unaffected.

Changes

Cohort / File(s)	Change Summary
Media item key composition src/components/AggregationPanel/AggregationPanel.js	Updated React keys for image, video, and audio items from index-only (key={idx}) to composite format (key={\${idx}-${item.url}`}`) to improve uniqueness and prevent re-rendering issues when items with different URLs share the same index.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify that item.url is consistently available for all image, video, and audio items to prevent key generation issues
• Confirm the change doesn't introduce unintended re-renders or side effects in related components
• Check whether existing tests need updates to accommodate the new key format

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "fix: Info panel briefly shows cached media content from previously selected cell when using pre-fetch" is specific, clear, and directly relates to the main change in the changeset. It accurately describes the bug being fixed and aligns with the code modification that adds unique keys for media elements based on URLs to prevent React from reusing stale components. The title uses professional conventional commit formatting and is concise without vague terminology, effectively communicating the primary change to reviewers.
Description Check	✅ Passed	The pull request description follows the provided template structure and includes the substantive sections required: the New Pull Request Checklist with appropriate items checked, a detailed Issue Description explaining the problem with media component caching, and a clear Approach section describing the solution. However, the description is incomplete in that the "Closes: FILL_THIS_OUT" field for linking to a specific issue was not filled in with an actual issue number, and the TODOs checklist items remain unchecked without clarification on their status. Despite these gaps, the core informational content about the issue and solution is well-documented and sufficient for understanding the PR's purpose.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 92ba334 and b7f48cc.

📒 Files selected for processing (1)

• src/components/AggregationPanel/AggregationPanel.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/AggregationPanel/AggregationPanel.js (1)

src/components/AggregationPanel/AggregationPanelComponents.js (6)

• ImageElement (79-85)
• ImageElement (79-85)
• VideoElement (88-95)
• VideoElement (88-95)
• AudioElement (98-105)
• AudioElement (98-105)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Docker linux/amd64

🔇 Additional comments (1)

src/components/AggregationPanel/AggregationPanel.js (1)

116-120: Excellent fix for preventing stale media content display.

Incorporating the URL into the React key ensures that media components are properly unmounted and remounted when the content changes, preventing the visual artifact of briefly showing the previous cell's media. This is the correct approach for image, video, and audio elements where async loading can cause stale content to flash.

The fix is well-targeted—text, table, and button elements don't require URL-based keys since they update synchronously without visual artifacts.

Please verify that item.url is always defined for media items to avoid keys like 0-undefined. If there's any possibility of missing URLs, consider adding a fallback:

key={`${idx}-${item.url || 'no-url'}`}

Also, as noted in the PR description, remember to:

• Add tests to verify the fix prevents stale media display during cell transitions
• Update documentation to reflect this key generation pattern for media elements

---

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 and usage tips.}

[parseplatformorg]

🎉 This change has been released in version 8.0.0-alpha.3

[parseplatformorg]

🎉 This change has been released in version 8.0.0