supabase / supabase / 30549215368

75%

push

github

feat(billing): Lazy load BillingSettings queries for components that are not in view (#48454)

## What kind of change does this PR introduce?

There are some expensive queries that are requested every time the
Billing Settings page loads, some of them happen for components that are
outside of the initial viewport. We can avoid performing those requests
unless the user explicitly scrolls to the relevant section. A similar
pattern has been implemented in the past for the Credit Balance section
in https://github.com/supabase/supabase/pull/45481.

I decided to skip the lazy load pattern in the components that appear at
the top of the Billing Settings (Subscription and Cost Control).

## What is the current behavior?

When loading the billing settings page, all components (except
CreditBalance) will perform requests to load the data they need.

## What is the new behavior?

The components will perform the request to load their data until they
are inside the viewport. You can verify this by opening the developer
tools and monitor the requests as you scroll through the page.

## Testing

These changes can be easily tested by making your browser's height very
short then opening the org billing settings `/org/{slug}/billing`. Open
the developer tools and filter for XHR requests. As you scroll through
the page, the requests will be made.

To verify that all potential requests are covered, I compared the
requests done during a fresh load with another settings page, the only
extra requests made by the billing settings page are the ones relevant
to the components at the very top (or the BillingSettings container
itself, which requests the subscription).

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Performance Improvements**
* Billing, payment methods, billing customer details, upcoming invoices,
and invoice lists now load only when their sections scroll into view,
reducing initial loading.
* Existing acc... (continued)

1243 of 1711 branches covered (72.65%)

Branch coverage included in aggregate %.

1849 of 2455 relevant lines covered (75.32%)

246.4 hits per line