feat: rework loading in Settings pages

[beonma]

What does this PR do?

This pull request ensures that the skeleton is correctly loaded into the appropriate shapes on all settings pages.

Fixes #2620

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

@beonma is attempting to deploy a commit to the formbricks Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[gupta-piyush19]

Thanks, @beonma, for the fix. 😊
Changes look good and consistent with the codebase. There is just one loading behavior that seems a bit off, can you please check the comments and fix this?
We'll be good to go after that 🚀

[gupta-piyush19]

Can you please try fixing these two loading behavior? It first shows the loading element and then the loader for the table, it would be great to see something consistent in just one loader.

loader.mp4

[beonma]

Hi, @gupta-piyush19.
I encountered difficulty in reproducing this issue, as I am using the local version with Docker (i guess). Despite removing the cache function to potentially observe the loading, I was still unable to replicate the problem. I have implemented some additional code to ensure consistency in appearance. Please feel free to request any further modifications.

[beonma]

Hi @gupta-piyush19, I have made the necessary changes, along with some additional adjustments for UI consistency. Please let me know if anything else needs to be modified.

[gupta-piyush19]

Hi @gupta-piyush19, I have made the necessary changes, along with some additional adjustments for UI consistency. Please let me know if anything else needs to be modified.

Thanks @beonma for the changes 👍
LGTM, we can now merge this 🚀 😊

[gupta-piyush19]

@pandeymangg Can you please take a final look at the code changes, as these files were recently edited? 😊

[pandeymangg]

Hey! @beonma the changes look good for the settings pages, except the settings/billing page which still seems to have a wrong loading UI, could you also pls take a look at it? 😊

Screen.Recording.2024-05-29.at.1.19.18.PM.mov

[beonma]

Hey, @pandeymangg.
I've made the necessary adjustments to the billing page. Please review the changes to ensure they meet the desired output. Feel free to suggest any additional modifications if needed.

Is there a way to simulate the cloud version within a local development environment? Because i overlooked these parts of the code due to working solely with the community version.

[pandeymangg]

Hey, @pandeymangg. I've made the necessary adjustments to the billing page. Please review the changes to ensure they meet the desired output. Feel free to suggest any additional modifications if needed.

Is there a way to simulate the cloud version within a local development environment? Because i overlooked these parts of the code due to working solely with the community version.

Thanks for making the changes! looking good now 😊
and to simulate the cloud version you can set IS_FORMBRICKS_CLOUD=1 in your .env file

[pandeymangg]

LGTM! 🚀

changes have been made :-)

[beonma]

Thank you @pandeymangg ! Thanks @gupta-piyush19 for reviewing this pr too.