Skip to content

Add loading animation to RSVP API interactions.#1208

Merged
mauteri merged 2 commits intodevelopfrom
GP-1207
Nov 5, 2025
Merged

Add loading animation to RSVP API interactions.#1208
mauteri merged 2 commits intodevelopfrom
GP-1207

Conversation

@mauteri
Copy link
Copy Markdown
Contributor

@mauteri mauteri commented Nov 5, 2025

Description of the Change

Implements visual feedback during RSVP API calls with a subtle pulsing animation. When users click RSVP button, the element pulses (fades from 100% to 40% opacity) while the request processes.

Changes:

  • Added gatherpress--loading CSS class with pulsing animation
  • Enhanced sendRsvpApiRequest() to accept loading element parameter
  • Applied loading state to all RSVP actions in view.js
  • Works universally on buttons and anchor elements

UX Benefits:

  • Provides immediate visual feedback that something is happening
  • Prevents duplicate clicks during API processing
  • Clean, non-intrusive animation that works with any styling

Closes #1207

How to test the Change

Changelog Entry

Added - New feature
Changed - Existing functionality
Deprecated - Soon-to-be removed feature
Removed - Feature
Fixed - Bug fix
Security - Vulnerability

Credits

Props @mauteri

Checklist:

  • I agree to follow this project's Code of Conduct.
  • I have updated the documentation accordingly.
  • I have added tests to cover my change.
  • All new and existing tests pass.

@what-the-diff
Copy link
Copy Markdown

what-the-diff bot commented Nov 5, 2025

PR Summary

  • Enhanced User Interface During API Requests
    A new logic was added in the 'View RSVP' section of our service to keep track of and display the loading state while API requests are being processed. This improvement will keep users informed about the progress of their requests.

  • Modified API Request Functionality
    The function responsible for sending RSVP API requests was modified to include an extra parameter loadingElement. This is particularly useful for displaying the loading state during this process.

  • Implemented Loading State Management
    In response to the request lifecycle, the newly included loadingElement is managed by adding and removing a CSS class within the RSVP API request function. This helps in effectively implementing the loading state.

  • Introduced New Loading Animations
    To enhance the visual feedback for users during the loading process, new CSS styles are introduced, coupled with a pulse animation. This style update is contained in the utility.scss file, a important component of our user interface.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Nov 5, 2025

Preview changes with Playground

You can preview the recent changes for PR#1208 with the following PHP versions:

PHP Version 8.3

PHP Version 7.4

Download .zip with build changes

Made with 💙 from GatherPress & a little bit of WordPress Playground. Changes will not persist between sessions.

@mauteri mauteri merged commit 10b9ec1 into develop Nov 5, 2025
10 checks passed
@mauteri mauteri deleted the GP-1207 branch November 5, 2025 22:21
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.

Add loading icon to buttons/links when API call is made.

1 participant