Feature: updated form modal with loading state UI

[jonwaldstein]

Description

Our current form modal does not have a loading UI. The experience is lack luster. This enhances the UX with an initial loading state. This is meant to be improved even further in the future but at least it's a start 😄

Affects

The form modal UI

Visuals

Screen.Recording.2025-03-26.at.2.04.08.PM.mov

Testing Instructions

• Use the donation form block on a page set to modal
• Try different form designs

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[JasonTheAdams]

YES!! Thank you!! 🥇

[JasonTheAdams]

Extra points if you add a transition such that the loading container spreads out to the final size of the form. 😁

[glaubersilva]

@jonwaldstein Niiice! Much better now.

I'm approving it because what this PR proposes to do is working great with all form templates, and the overall code looks good to me.

However, another thing that keeps bothering me about this modal is the weird vertical scroll displayed in the Edge and Chrome browsers on Windows - check the attached screenshots for reference. This is probably one of these UX improvements that we'll need to do in subsequent PRs.

[jonwaldstein]

@glaubersilva thanks! yeah agreed, let's keep this party going 😄

@JasonTheAdams ohhh yeahh. I really want to take this thing to the next level. Just gotta keep chipping away at it 🔨