Social: Fix SIG preview infinite spinner when default image is deleted

[gmjuhasz]

Fixes SOCIAL-424

Proposed changes

When the global Social Image Generator (SIG) default background image is deleted from the media library, the SIG template preview shows an infinite spinner. This happens because getEntityRecord for a deleted attachment never resolves, causing calculateImageUrl() to permanently return FEATURED_IMAGE_STILL_LOADING.

This PR fixes the issue by checking hasFinishedResolution to distinguish "still loading" from "attachment doesn't exist" across all affected code paths:

Core fixes

• useSigPreview hook — The getMedia callback now checks hasFinishedResolution so deleted attachments resolve to null instead of staying stuck as FEATURED_IMAGE_STILL_LOADING. Also added try/catch on the apiFetch call (previously an API error would also cause an infinite spinner), and an AbortController to cancel in-flight requests on effect cleanup.
• calculateImageUrl — Now distinguishes undefined (still loading) from null (resolved but missing) when checking the media entity.
• useMediaDetails hook — Added hasFinishedResolution check and exposes an isNotFound flag so consumers can detect deleted attachments.

UI fixes

• GeneratedImagePreview — Added onError handler on the <img> tag so a broken image URL stops the spinner instead of spinning forever.
• BackgroundImagePicker (post editor) — Hides the "Default Image" menu option when the default image doesn't exist. Automatically falls back to 'none' if imageType was set to 'default' for a deleted image.
• TemplatePickerModal (admin settings page) — Clears the selected image when the attachment is detected as not found, showing the "Choose Image" button instead of a spinner.

Cleanup

• Removed dead generatedImageUrlRef that was no longer used after the AbortController refactor.
• Made MediaDetails type fields optional to match the actual runtime behavior (the hook can return {} when no media exists).

Other information

• Generate changelog entries for this PR (using AI).

Related product discussion/links

• https://linear.app/a8c/issue/SOCIAL-424
• pgvhYc-z6-p2
• p1HpG7-xUC-p2
• Related: SOCIAL-403

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Prerequisites: A WordPress site with Jetpack Social plan and SIG enabled.

Scenario 1: Deleted default image — post editor

1. Go to Jetpack → Social settings page
2. Enable Social Image Generator → "Change defaults" → pick a template and upload a default image → Save
3. Go to Media Library and delete that default image
4. Open any post in the block editor
5. Open Social sidebar → "Preview and customize" → "Edit social image template"
6. Before fix: spinner forever. After fix: preview loads without background image, image type falls back to "none", and "Default Image" option is hidden from the dropdown

Scenario 2: Deleted default image — setting featured image first

1. Repeat steps 1-3 from above.
2. Create a new post, set a featured image
3. Switch to the Jetpack tab, media should show the featured image ( so no regression by showing none because the default image is missing )

Scenario 3: Deleted default image — admin settings page

1. With the same setup (default image deleted), go to Jetpack → Social settings page
2. Click "Change defaults" to open the template picker modal
3. Before fix: spinner forever on the image picker. After fix: shows the "Choose Image" button, allowing you to pick a new default image

Scenario 4: Normal flow (no regression)

1. Set a new default image in Jetpack → Social settings
2. Open a post → Edit social image template
3. Verify the preview loads correctly with the background image
4. Change template/font → verify preview updates
5. Try with featured image, custom image, and no image — all should work normally

Scenario 5: API failure resilience

1. Open a post → Edit social image template
2. Open browser DevTools → Network tab → block requests matching generate-token
3. Before fix: spinner forever. After fix: spinner stops, shows empty preview state

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the fix/social-424-sig-preview-deleted-default-image branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/social-424-sig-preview-deleted-default-image

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[jp-launch-control]

Code Coverage Summary

Coverage changed in 6 files. Only the first 5 are listed here.

File	Coverage	Δ%	Δ Uncovered
projects/packages/publicize/_inc/hooks/use-sig-preview/index.ts	35/45 (77.78%)	-9.72%	5 💔
projects/packages/publicize/_inc/hooks/use-media-details/index.js	2/36 (5.56%)	-0.69%	4 💔
projects/packages/publicize/_inc/components/social-image-generator/template-picker/modal/index.js	21/23 (91.30%)	1.30%	0 💚
projects/packages/publicize/_inc/hooks/use-sig-preview/utils.ts	32/32 (100.00%)	0.00%	0 💚
projects/packages/publicize/_inc/components/unified-modal/edit-template/sidebar.tsx	10/12 (83.33%)	8.33%	-1 💚

Full summary · PHP report · JS report

_{Coverage check overridden by Covered by non-unit tests Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code .}

[Copilot]

Pull request overview

Fixes the Social Image Generator (SIG) template preview getting stuck in an infinite spinner when the configured default background image attachment has been deleted, by distinguishing “still resolving” vs “resolved but missing” across hooks/components and adding resilience around preview generation.

Changes:

• Update SIG preview media resolution to treat missing (deleted) attachments as null rather than “still loading”, and adjust calculateImageUrl() accordingly.
• Harden useSigPreview token generation with abortable requests and error handling; expand unit tests to cover abort + failure paths.
• Extend useMediaDetails to expose an isNotFound signal and update dependent UI/tests to hide/fallback when the default image no longer exists.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
projects/packages/publicize/changelog/fix-social-424-sig-preview-deleted-default-image	Adds changelog fragment for the SIG infinite spinner fix.
projects/packages/publicize/_inc/hooks/use-sig-preview/utils.ts	Distinguishes undefined (loading) vs null (missing) media in calculateImageUrl.
projects/packages/publicize/_inc/hooks/use-sig-preview/test/utils.test.js	Adds coverage for “resolved but missing attachment” returning null.
projects/packages/publicize/_inc/hooks/use-sig-preview/test/index.test.js	Updates expectations and adds tests for abort + apiFetch rejection + missing attachment behavior.
projects/packages/publicize/_inc/hooks/use-sig-preview/index.ts	Adds hasFinishedResolution checks for attachments; makes token generation abortable + resilient to failures.
projects/packages/publicize/_inc/hooks/use-media-details/types.ts	Makes metaData / mediaData optional on the MediaDetails type.
projects/packages/publicize/_inc/hooks/use-media-details/index.js	Uses hasFinishedResolution and returns [details, isNotFound] to detect deleted attachments.
projects/packages/publicize/_inc/hooks/use-connection-preview-data/test/index.test.ts	Updates mocks for the useMediaDetails return shape in affected tests.
projects/packages/publicize/_inc/hooks/use-connection-media-validation/test/index.test.ts	Updates mocks for the useMediaDetails return shape.
projects/packages/publicize/_inc/components/unified-modal/edit-template/test/sidebar.test.tsx	Adds tests for fallback from deleted default image and hiding the “Default Image” option.
projects/packages/publicize/_inc/components/unified-modal/edit-template/background-image-picker.tsx	Hides default option when deleted; falls back from default to none.
projects/packages/publicize/_inc/components/social-image-generator/template-picker/modal/test/index.test.js	Updates hook mocking and adds test for clearing image when attachment is missing.
projects/packages/publicize/_inc/components/social-image-generator/template-picker/modal/index.js	Clears selected image when useMediaDetails reports attachment not found.