perf(ui): skeleton loader for payouts page and modal

[ayushsharma74]

Description

Added a skeleton loader for the /settings/payout page and bank account modal

Demo Videos

Without Equity Section

https://github.com/user-attachments/assets/b8cc2cbd-b7ac-42b1-a5ea-618fccc1e828

With Equity Section

https://github.com/user-attachments/assets/917cada6-ae16-4307-887b-544818dbddd1

Screenshots

Page

Dark Mode	Light Mode

Modal

Dark Mode	Light Mode

AI Disclosure

I have used ai to fix TypeScript errors in BackAccountModal.tsx when i changed useSuspenceQuery to useQuery

[ayushsharma74]

@laugardie I've made the requested design changes. Please take a look when you have time.

[laugardie]

@ayushsharma74

Modal

There’s a slight jumping effect when opening the add/edit payout method modal. It would feel smoother if the modal kept a consistent height during loading and after content appears.

https://github.com/user-attachments/assets/5b87000a-77b1-4cff-b5cb-6fabc2420b1e

It looks a bit inconsistent that the first input shows while the others use skeletons. Could we make all fields use skeletons for consistency?

Could you include the 3 rectangle skeletons shown in the screenshot as part of the loading state to represent transfer method?

Payouts page

There’s also a small jumping effect in the section titles when loading.

Similar to the modal, it feels visually inconsistent to show a skeleton loader for the payout method while the Equity section appears immediately.

We could keep the section headers visible but keep the section data loading, and only show the actual content once all sections are ready for a smoother experience.

[ayushsharma74]

@laugardie thanks for the review, just a quick question for clarification

We could keep the section headers visible but keep the section data loading

So i should keep the equity section also in loading while other sections are loading?

[laugardie]

Yes, please.

[ayushsharma74]

Hey @laugardie sorry for the delay, I’ve pushed the requested changes. Please take a look whenever you get a chance.

https://github.com/user-attachments/assets/6360d2d4-cfc0-43a5-b366-21b5729cc82f

[laugardie]

Thanks for the changes @ayushsharma74! Looks good to me @slavingia _a

[slavingia]

Waiting for green build

[ayushsharma74]

@slavingia One test was failing because PR #1504 replaced "Pay Now" with "Approve", and the change wasn’t reflected in that test. I've pushed a fix for it.

This flaky test is still failing, and it appears to be unrelated:

[slavingia]

Build fails

[slavingia]

We only merge green builds, even if flakey.