Skip to content

🖼️ fix: Hide Duplicate Image Placeholder During Image Generation#12654

Merged
danny-avila merged 2 commits into
devfrom
claude/adoring-chatelet
Apr 14, 2026
Merged

🖼️ fix: Hide Duplicate Image Placeholder During Image Generation#12654
danny-avila merged 2 commits into
devfrom
claude/adoring-chatelet

Conversation

@danny-avila

Copy link
Copy Markdown
Owner

Summary

I fixed a visual bug where a duplicate image placeholder (skeleton) was rendered below the PixelCard canvas animation during image generation. The Image component was always mounted regardless of whether a filepath existed, causing an empty skeleton to appear beneath the generation animation. Now the Image component only renders when filepath is available, so the PixelCard animation serves as the sole visual indicator during generation.

  • Conditionally render the Image component only when filepath is truthy in the OpenAIImageGen component
  • Remove the ?? '' fallback for imagePath since the component no longer renders without a valid path
  • Preserve existing behavior for user-attached images, which always have a filepath

Change Type

  • Bug fix (non-breaking change which fixes an issue)

Testing

  1. Trigger an image generation request through an agent-style tool (e.g., GPT-Image-1)
  2. Verify only the PixelCard canvas animation displays during generation — no duplicate skeleton placeholder below it
  3. Verify the final generated image renders correctly once generation completes
  4. Verify user-attached images still display with their skeleton loading state as expected

Checklist

  • My code adheres to this project's style guidelines
  • I have performed a self-review of my own code
  • My changes do not introduce new warnings

Copilot AI review requested due to automatic review settings April 14, 2026 02:19

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes a UI issue in the chat image-generation tool output where an extra (empty) image skeleton was being rendered beneath the PixelCard generation animation by preventing the Image component from mounting until a real filepath exists.

Changes:

  • Conditionally render the Image component only when filepath is truthy.
  • Remove the empty-string fallback (filepath ?? '') so an empty imagePath is never passed to Image.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +241 to +249
{filepath && (
<Image
altText={filename}
imagePath={filepath}
width={Number(dimensions.width?.split('px')[0])}
height={Number(dimensions.height?.split('px')[0])}
args={parsedArgs}
/>
)}

Copilot AI Apr 14, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes the render contract for the Image component (it no longer mounts when attachments/filepath is missing). There are existing unit tests that currently expect <Image /> to be present even when attachments is undefined (e.g., client/src/components/Chat/Messages/Content/__tests__/OpenAIImageGen.test.tsx cases like “keeps Image mounted during generation” and the args parsing tests). Those tests will fail and should be updated to assert the new behavior (no Image until filepath is available) and/or to provide an attachment with a filepath when an Image is expected.

Copilot uses AI. Check for mistakes.
@danny-avila
danny-avila changed the base branch from main to dev April 14, 2026 02:32
@danny-avila

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep it up!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@github-actions

Copy link
Copy Markdown
Contributor

GitNexus: 🚀 deployed

The LibreChat-pr-12654 index is now live on the MCP server.
Deploy run

@danny-avila
danny-avila merged commit b40e8be into dev Apr 14, 2026
8 checks passed
@danny-avila
danny-avila deleted the claude/adoring-chatelet branch April 14, 2026 11:53
jcbartle pushed a commit to jcbartle/LibreChat that referenced this pull request May 11, 2026
…ny-avila#12654)

* fix: Hide duplicate image placeholder during image generation

* test: Update OpenAIImageGen tests for conditional Image rendering
ThomasVuNguyen pushed a commit to ThomasVuNguyen/LibreChat that referenced this pull request Jul 15, 2026
…ny-avila#12654)

* fix: Hide duplicate image placeholder during image generation

* test: Update OpenAIImageGen tests for conditional Image rendering
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants