T2902 Create loading state on profile settingspage by Danielgergely · Pull Request #253 · CompassionCH/compassion-website

Danielgergely · 2026-01-23T06:53:14Z

Added loading spinner which blocks buttons and indicates loading -> improves UX
Adapted the form to utilize basic client-side validation with visual indicators. (Faster and better feedback to the user, instead of waiting until the backend returns the validation result)
Utilized the already existing global form validation
Adapted and tweaked it a bit
Small bugfixes and UI improvements

…izard.js

…er in my2_new_sponsorship_wizard.js

…s/form_field_validator.js

…izard.js

…er in my2_new_sponsorship_wizard.js

…s/form_field_validator.js

…sership-form' into T2586-phone-number-check-in-sponsership-form # Conflicts: # theme_compassion_2025/templates/components/FormField.xml

…-sponsership-form T2586 phone number check in sponsership form

… for sponsorship-wizard

…n messages # FEATURE: Added (optional) display content and edit field tags to the FormField # REFACTOR: Adapted last and firstname form fields to be compatible with new FormField # REFACTOR: Changed form from generic <div> to a better suited <form> # REFACTOR: Added e.preventDefault() to button event handlers to prevent automatic submission of form when clicking a button

# REFACTOR: Added validation to all form fields # REFACTOR: Changed clearErrors to clearValidations -> my_user_settings.js # REFACTOR: Added validation check event listener to input fields

# FEATURE: Added loading spinner to settings page # FEATURE: Show/hide spinner based on backend loading state # FEATURE: Added some styling for the spinner

# FEATURE: spinner parent styling # REFACTOR: Added wrapper to spin icon and applied animation to the wrapper instead of the icon itself

gemini-code-assist · 2026-01-23T06:53:33Z

Summary of Changes

Hello @Danielgergely, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience on the profile settings page. It introduces a loading spinner to provide clear feedback during save operations and implements robust client-side validation for form fields. These additions ensure users receive immediate visual cues and error messages, making the interaction smoother and more intuitive.

Highlights

Loading Spinner Implementation: A loading spinner has been added to the user profile settings page. This spinner activates when the user attempts to save changes, blocking interaction with the buttons and providing visual feedback that an operation is in progress, thereby improving the user experience.
Client-Side Form Validation: The profile settings form now incorporates basic client-side validation. This provides immediate feedback to the user regarding invalid input, such as missing required fields or incorrect formats (e.g., email, phone numbers, zip codes), before the data is sent to the backend. This significantly enhances responsiveness and user guidance.
UI/UX Enhancements: The changes collectively improve the overall user experience by offering faster feedback on form input and clearly indicating when the system is processing a request, reducing uncertainty and potential for multiple submissions.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request significantly improves the user experience on the profile settings page by adding client-side validation and a loading spinner. The implementation is generally solid, particularly the handling of UI states during asynchronous operations. I've identified a few issues, including a critical CSS syntax error, some overly restrictive validation patterns that could impact users, and an incorrect HTML input type. I've also included suggestions for code consistency and modernization in the JavaScript. Addressing these points will further enhance the quality and robustness of the feature.

my_compassion/static/src/css/user_settings.css

my_compassion/templates/pages/my2_user_settings.xml

my_compassion/static/src/js/my2_user_settings.js

my_compassion/templates/pages/my2_user_settings.xml

# FIX: removed redundant mobile version override selector # FIX: fixed typos and made minor corrections to regex patterns # REFACTOR: Simplified javascript

NoeBerdoz · 2026-01-27T16:00:40Z

The implemented field validation logic goes in conflict with an awaiting PR #230, It would be perfect if you can take the time to review this PR, and integrate its work into yours.

Here is how to proceed:

Review PR T2591 extend usage of form field validator #230
Merge PR T2591 extend usage of form field validator #230 into yours T2902 Create loading state on profile settingspage #253
Refactor your field validation to be compliant with the approach of T2591 extend usage of form field validator #230
Document this in both PR when done

Fee free to suggest another way of doing it.

NoeBerdoz

Reason in my last comment

…profile-settingspage # Conflicts: # my_compassion/static/src/js/my2_user_settings.js # my_compassion/templates/pages/my2_user_settings.xml # theme_compassion_2025/templates/components/FormField.xml

# Conflicts: # theme_compassion_2025/templates/components/Select.xml

- REFACTOR: removed unused toggleLoader function calls - REFACTOR: removed user reference and phone required from user settings - REFACTOR: added classes to hide the red asterisk in display mode - REFACTOR: changed var to const, and changed error message to display in white when dark-bg class is added to input

Danielgergely · 2026-02-10T16:15:17Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces significant improvements to the user experience by adding a loading state to the profile settings page and implementing client-side form validation. The new FormFieldValidator widget centralizes validation logic for required fields, email, and phone numbers, providing faster feedback to the user. Styles for invalid fields and required asterisks have been updated globally and specifically for the user settings and new sponsorship wizard forms. While the changes are generally positive, there are some areas that require attention, particularly regarding redundant validation logic and potential issues with event listeners in the user settings JavaScript.

my_compassion/static/src/js/my2_user_settings.js

theme_compassion_2025/static/src/utils/form_field_validator.js

- REFACTOR: changed position of loading indicator - REFACTOR: consolidated and simplify js business logic on user form settings - REFACTOR: added container to edit + cancel button for better positioning - REFACTOR: added a limit of 15 numbers to phone number fields - FEAT: added name and zip regex

Danielgergely · 2026-02-11T10:41:46Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces significant improvements to the user experience and code maintainability. The addition of a loading spinner on the profile settings page provides clear feedback to the user during save operations. The major refactoring of form validation to a client-side, component-based approach is excellent. It centralizes validation logic, making the code cleaner, more robust, and easier to extend. The CSS has also been nicely refactored to use global styles, reducing duplication. Overall, this is a high-quality contribution.

my_compassion/templates/pages/my2_new_sponsorship_wizard.xml

my_compassion/static/src/css/user_settings.css

Danielgergely · 2026-02-11T13:37:24Z

IMPORTANT: For the title it is recommended to use these 4 values: Mr., Mrs., Miss., Fam. To activate these theis_published value should be set to true. This will populate the title dropdown accordingly.
Additionally the French (and maybe Italian) translations might need to be adapted because the title.shortcut is used. In English and German the translation is good.

EliasKeller and others added 30 commits August 18, 2025 13:09

[T2586]: basic regex validation phone nubmer in my2_new_sponsorship_w…

3d6d980

…izard.js

[T2586]: basic regex validation email in my2_new_sponsorship_wizard.js

cb65fcb

[T2586] FEAT: add event (onBlur) binding for the email and phone numb…

6158473

…er in my2_new_sponsorship_wizard.js

[T2586] FEAT: started to build a centralized field validation in util…

5da7fec

…s/form_field_validator.js

[T2586] FEAT: included Selection and made field validation configurable

beabe75

[T2586] REFACTOR: added comments where needed

dc82b83

[T2586] refactoring

b6c74a2

[T2586] refactoring

e26d963

[T2586] pre-commit

e4f0d8d

[T2586]: basic regex validation phone nubmer in my2_new_sponsorship_w…

adf0afc

…izard.js

[T2586]: basic regex validation email in my2_new_sponsorship_wizard.js

1514502

[T2586] FEAT: add event (onBlur) binding for the email and phone numb…

eb120c0

…er in my2_new_sponsorship_wizard.js

[T2586] FEAT: started to build a centralized field validation in util…

2e81ff6

…s/form_field_validator.js

[T2586] FEAT: included Selection and made field validation configurable

9295535

[T2586] REFACTOR: added comments where needed

c0b461d

[T2586] refactoring

7772e95

[T2586] refactoring

ed809ed

Run pre-commit formatting

b246757

Merge remote-tracking branch 'origin/T2586-phone-number-check-in-spon…

0733524

…sership-form' into T2586-phone-number-check-in-sponsership-form # Conflicts: # theme_compassion_2025/templates/components/FormField.xml

merging

8717a7e

Merge pull request #229 from CompassionCH/T2586-phone-number-check-in…

972253d

…-sponsership-form T2586 phone number check in sponsership form

[T2591] FEAT: make validation available globally for my_compassion 2.0

fda444e

[T2591] FEAT: validate user settings

c55696d

[T2591] FEAT: append backend error to specific field

026fcd4

[T2591] REFACTOR: pre-commit

b6ebcf3

[T2591] REFACTOR: remove unnecessary css invalid class specified only…

5931ada

… for sponsorship-wizard

[T2591] REFACTOR: kabab case to camel cas in data DOM object

3ed155c

[T2591] REFACTOR: pre-commit

3e31652

[T2591] REFACTOR: pre-commit

4ca9cd9

Danielgergely added 4 commits January 22, 2026 16:59

[T2902] REFACTOR: form validation for settings page complete

a6725e0

# REFACTOR: Added validation to all form fields # REFACTOR: Changed clearErrors to clearValidations -> my_user_settings.js # REFACTOR: Added validation check event listener to input fields

[T2902] FEATURE: loading spinner added

e739e1f

# FEATURE: Added loading spinner to settings page # FEATURE: Show/hide spinner based on backend loading state # FEATURE: Added some styling for the spinner

[T2902] FEATURE: loading spinner working in both desktop and mobile view

cedf2a1

# FEATURE: spinner parent styling # REFACTOR: Added wrapper to spin icon and applied animation to the wrapper instead of the icon itself

[T2902] STYLE: pre-commit changes

9c00a0e

gemini-code-assist bot reviewed Jan 23, 2026

View reviewed changes

Danielgergely added 2 commits January 23, 2026 07:56

[T2092] STYLE: pre-commit 2

f6c9b22

[T2902] FIX: Gemini code assist suggestions

c97fd3d

# FIX: removed redundant mobile version override selector # FIX: fixed typos and made minor corrections to regex patterns # REFACTOR: Simplified javascript

NoeBerdoz changed the title ~~T2902 profile settingspage~~ T2902 Create loading state on profile settingspage Jan 27, 2026

NoeBerdoz requested changes Jan 27, 2026

View reviewed changes

Merge branch 'T2591-extend-usage-of-form-field-validator' into T2902-…

37f2137

…profile-settingspage # Conflicts: # my_compassion/static/src/js/my2_user_settings.js # my_compassion/templates/pages/my2_user_settings.xml # theme_compassion_2025/templates/components/FormField.xml

ecino changed the base branch from 14.0-MyCompassion2.0 to 14.0 February 5, 2026 10:25

NoeBerdoz marked this pull request as draft February 6, 2026 11:56

Merge branch '14.0' into T2902-profile-settingspage

418db7d

# Conflicts: # theme_compassion_2025/templates/components/Select.xml

Danielgergely mentioned this pull request Feb 10, 2026

[T2932] contact page #280

Open

gemini-code-assist bot reviewed Feb 10, 2026

View reviewed changes

my_compassion/static/src/js/my2_user_settings.js Outdated Show resolved Hide resolved

my_compassion/static/src/js/my2_user_settings.js Outdated Show resolved Hide resolved

theme_compassion_2025/static/src/utils/form_field_validator.js Outdated Show resolved Hide resolved

gemini-code-assist bot reviewed Feb 11, 2026

View reviewed changes

my_compassion/templates/pages/my2_new_sponsorship_wizard.xml Outdated Show resolved Hide resolved

my_compassion/static/src/css/user_settings.css Outdated Show resolved Hide resolved

[T2904] FIX: GCA suggestions

55782ca

Danielgergely marked this pull request as ready for review February 11, 2026 10:53

[T2902] REFACTOR: re-added user reference to user settings page

8991106

Conversation

Danielgergely commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Jan 23, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

NoeBerdoz commented Jan 27, 2026

Uh oh!

NoeBerdoz left a comment

Choose a reason for hiding this comment

Uh oh!

Danielgergely commented Feb 10, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Danielgergely commented Feb 11, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Danielgergely commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Danielgergely commented Jan 23, 2026 •

edited

Loading

Danielgergely commented Feb 11, 2026 •

edited

Loading