fix: Save button remains in loading state after saving app settings #35394

sushen123 · 2025-03-04T13:54:06Z

Proposed changes (including videos or screenshots)

This PR fixes an issue where the save button in the app settings page remains in a loading state even after the settings have been successfully saved. The issue occurs because the loading prop of the save button depends on both isSubmitting and isSubmitted states from react-hook-form. The isSubmitted state remains true after submission, causing the button to stay in a loading state indefinitely.

Before:

Screencast.2025-03-04.18.46.27.mp4

After:
https://github.com/user-attachments/assets/f81958e1-6e15-49cb-8b32-38dbec9aee4f

Issue(s)

Closes #35391

Steps to test or reproduce

Go to Apps Marketplace.
Click on Private Apps.
Click on one Apps
Open the Settings tab f.
Modify one or more settings.
Click the Save Changes button.

dionisio-bot · 2025-03-04T13:54:10Z

Looks like this PR is not ready to merge, because of the following issues:

This PR is missing the 'stat: QA assured' label

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

changeset-bot · 2025-03-04T13:54:10Z

🦋 Changeset detected

Latest commit: 478f114

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 35 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/freeswitch	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/ui-contexts	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/stream-hub-service	Patch
@rocket.chat/license	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/instance-status	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

CLAassistant · 2025-03-04T13:54:17Z

All committers have signed the CLA.

abhinavkrin · 2025-03-04T14:27:49Z

Hey @sushant52 , Thanks for identifying and fixing this issue.
Could you please add a change set?
Adding changeset guidelines

sushen123 · 2025-03-04T15:05:05Z

Hey @sushant52 , Thanks for identifying and fixing this issue. Could you please add a change set? Adding changeset guidelines

Hey @abhinavkrin I’ve added the changeset as requested. You can look

abhinavkrin · 2025-03-04T15:38:05Z

.changeset/fuzzy-eyes-clean.md

+'@rocket.chat/meteor': patch
+---
+
+Fixes the save button loading state in the app settings page. The button now exits the loading state after settings are successfully saved. This resolves an issue where the button remained in a loading state indefinitely due to incorrect dependency on the `isSubmitted` state from `react-hook-form`.


Suggested change

Fixes the save button loading state in the app settings page. The button now exits the loading state after settings are successfully saved. This resolves an issue where the button remained in a loading state indefinitely due to incorrect dependency on the `isSubmitted` state from `react-hook-form`.

Fixes the save button loading state in app settings, ensuring it resets properly after saving.

Ok , I’ve made the changes

abhinavkrin

After saving the settings, the footer which includes the save and cancel button should go away.
But currently it does not seem to be the case.

Screen.Recording.2025-03-05.at.3.21.33.PM.mov

Would suggest to reset the form in the saveAppSettings function so that the isDirty state resets for the form.

const saveAppSettings = useCallback(
		async (data: AppDetailsPageFormData) => {
			try {
				await AppClientOrchestratorInstance.setAppSettings(
					id,
					(Object.values(settings || {}) as ISetting[]).map((setting) => ({
						...setting,
						value: data[setting.id],
					})),
				);
				reset(data); // reset form here
				dispatchToastMessage({ type: 'success', message: `${name} settings saved succesfully` });
			} catch (e: any) {
				handleAPIError(e);
			}
		},
		[dispatchToastMessage, id, name, reset, settings],  // add to dependency
	);

codecov · 2025-03-05T10:01:15Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 59.42%. Comparing base (19f34c5) to head (ff32d91).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #35394   +/-   ##
========================================
  Coverage    59.42%   59.42%           
========================================
  Files         2829     2829           
  Lines        68334    68334           
  Branches     15133    15133           
========================================
  Hits         40610    40610           
  Misses       25066    25066           
  Partials      2658     2658

Flag	Coverage Δ
unit	`75.50% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

sushen123 · 2025-03-05T12:46:39Z

After saving the settings, the footer which includes the save and cancel button should go away. But currently it does not seem to be the case.

Screen.Recording.2025-03-05.at.3.21.33.PM.mov
Would suggest to reset the form in the saveAppSettings function so that the isDirty state resets for the form.

const saveAppSettings = useCallback(
		async (data: AppDetailsPageFormData) => {
			try {
				await AppClientOrchestratorInstance.setAppSettings(
					id,
					(Object.values(settings || {}) as ISetting[]).map((setting) => ({
						...setting,
						value: data[setting.id],
					})),
				);
				reset(data); // reset form here
				dispatchToastMessage({ type: 'success', message: `${name} settings saved succesfully` });
			} catch (e: any) {
				handleAPIError(e);
			}
		},
		[dispatchToastMessage, id, name, reset, settings],  // add to dependency
	);

Thank you for pointing this out. I’ve implemented the fix. Let me know if there’s anything else I need to address

abhinavkrin

Looks good. Could you add tests for the fix? It is the last thing needed now. Tests make sure that such errors does not reoccur in future. Unit tests for AppDetailsPage.tsx ?

sushen123 · 2025-03-07T09:35:12Z

Looks good. Could you add tests for the fix? It is the last thing needed now. Tests make sure that such errors does not reoccur in future. Unit tests for AppDetailsPage.tsx ?

Hey, I have added unit tests . I’m still learning how to write tests, I’d appreciate it if you could review them and let me know if there’s anything I need to improve or adjust.

Signed-off-by: Abhinav Kumar <[email protected]>

fix: Save button remains in loading state after saving app settings

4c41d8d

sushen123 requested a review from a team as a code owner March 4, 2025 13:54

abhinavkrin added the communityPR label Mar 4, 2025

Add changeset for save button loading state fix

503b6f7

abhinavkrin requested changes Mar 4, 2025

View reviewed changes

Update changeset for save button

ff32d91

abhinavkrin requested changes Mar 5, 2025

View reviewed changes

abhinavkrin added this to the 7.5.0 milestone Mar 5, 2025

fix: Hide footer after saving app settings

9be6db7

abhinavkrin requested changes Mar 6, 2025

View reviewed changes

Add Unit test for AppDetailsPage.tsx

b46f1d8

Merge branch 'develop' into fix/save-button-loading-state

2a8368e

sushen123 force-pushed the fix/save-button-loading-state branch from 2a8368e to 86f79c1 Compare March 7, 2025 12:45

abhinavkrin force-pushed the fix/save-button-loading-state branch from 86f79c1 to 2a8368e Compare March 7, 2025 14:53

tests

478f114

Signed-off-by: Abhinav Kumar <[email protected]>

abhinavkrin self-requested a review March 7, 2025 15:30

abhinavkrin approved these changes Mar 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Save button remains in loading state after saving app settings #35394

fix: Save button remains in loading state after saving app settings #35394

sushen123 commented Mar 4, 2025 •

edited by dougfabris

Loading

dionisio-bot bot commented Mar 4, 2025 •

edited

Loading

changeset-bot bot commented Mar 4, 2025 •

edited

Loading

CLAassistant commented Mar 4, 2025 •

edited

Loading

abhinavkrin commented Mar 4, 2025

sushen123 commented Mar 4, 2025 •

edited

Loading

abhinavkrin Mar 4, 2025

sushen123 Mar 4, 2025

abhinavkrin left a comment •

edited

Loading

codecov bot commented Mar 5, 2025

sushen123 commented Mar 5, 2025

abhinavkrin left a comment

sushen123 commented Mar 7, 2025

	Fixes the save button loading state in the app settings page. The button now exits the loading state after settings are successfully saved. This resolves an issue where the button remained in a loading state indefinitely due to incorrect dependency on the `isSubmitted` state from `react-hook-form`.
	Fixes the save button loading state in app settings, ensuring it resets properly after saving.

fix: Save button remains in loading state after saving app settings #35394

Are you sure you want to change the base?

fix: Save button remains in loading state after saving app settings #35394

Conversation

sushen123 commented Mar 4, 2025 • edited by dougfabris Loading

Proposed changes (including videos or screenshots)

Issue(s)

Steps to test or reproduce

dionisio-bot bot commented Mar 4, 2025 • edited Loading

changeset-bot bot commented Mar 4, 2025 • edited Loading

🦋 Changeset detected

CLAassistant commented Mar 4, 2025 • edited Loading

abhinavkrin commented Mar 4, 2025

sushen123 commented Mar 4, 2025 • edited Loading

abhinavkrin Mar 4, 2025

Choose a reason for hiding this comment

sushen123 Mar 4, 2025

Choose a reason for hiding this comment

abhinavkrin left a comment • edited Loading

Choose a reason for hiding this comment

codecov bot commented Mar 5, 2025

Codecov Report

sushen123 commented Mar 5, 2025

abhinavkrin left a comment

Choose a reason for hiding this comment

sushen123 commented Mar 7, 2025

sushen123 commented Mar 4, 2025 •

edited by dougfabris

Loading

dionisio-bot bot commented Mar 4, 2025 •

edited

Loading

changeset-bot bot commented Mar 4, 2025 •

edited

Loading

CLAassistant commented Mar 4, 2025 •

edited

Loading

sushen123 commented Mar 4, 2025 •

edited

Loading

abhinavkrin left a comment •

edited

Loading