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

[sushen123]

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]

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]

🦋 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]

All committers have signed the CLA.

[abhinavkrin]

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

[sushen123]

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]

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.

[sushen123]

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]

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]

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]

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.