mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 02:20:52 +08:00
5a3e3598d0
## 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 access/permission checks are still applied before fetching billing-related data. * **Tests** * Updated billing and invoices tests to mock viewport intersection behavior (IntersectionObserver) to match the new lazy-loading behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->