feat: add CertificateRecordingOverlay to CatCertificateBody for impro…

[Daddyjohn63]

…ved user feedback

• Integrated the CertificateRecordingOverlay component to provide visual feedback during certificate generation.
• Updated the component to display a "Preparing..." button when the certificate is being processed, enhancing user experience.

Summary by CodeRabbit

• New Features
  • Added a full-screen recording status overlay with registry artwork, descriptive messaging, and a loading spinner.
  • The overlay appears while the first certificate is being generated and is hidden once processing is complete.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
naming-application-web	Ready	Preview	Aug 9, 2026 2:28pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 781046ff-7229-4c55-afcc-d8452b1c8986

📥 Commits

Reviewing files that changed from the base of the PR and between d8447f1 and d2f0620.

⛔ Files ignored due to path filters (1)

• apps/web/public/images/registry-office.png is excluded by !**/*.png

📒 Files selected for processing (2)

• apps/web/modules/ceremony/ui/components/certificate-recording-overlay.tsx
• apps/web/modules/ceremony/ui/views/cat-certificate-view.tsx

---

📝 Walkthrough

Walkthrough

The pull request adds an accessible full-screen recording overlay. The certificate view displays it during initial certificate generation and hides it after completion.

Changes

Certificate recording flow

Layer / File(s)	Summary
Recording overlay component apps/web/modules/ceremony/ui/components/certificate-recording-overlay.tsx	Adds CertificateRecordingOverlay with conditional rendering, recording status text, registry artwork, accessibility attributes, and a loading spinner.
Certificate view integration apps/web/modules/ceremony/ui/views/cat-certificate-view.tsx	Renders the overlay while certificate generation is working and the ceremony is incomplete.

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

Possibly related PRs

• Daddyjohn63/naming-application#27: Modifies cat-certificate-view.tsx for the certificate-generation flow.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the addition of CertificateRecordingOverlay to the certificate view for improved feedback during certificate generation.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch registry-office

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.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/web/modules/ceremony/ui/components/certificate-recording-overlay.tsx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

apps/web/modules/ceremony/ui/views/cat-certificate-view.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

---

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