derive aggregation key in UI

Author: HarshMN2345

src/routes/(console)/organization-[organization]/billing/+page.ts

@@ -96,8 +96,6 @@ export const load: PageLoad = async ({ parent, depends, url, route }) => {
         nextPlan: billingPlanDowngrade,
         // expose pagination for components
         limit: getLimit(url, route, 5),
-        offset: pageToOffset(getPage(url) || 1, getLimit(url, route, 5)),
-        // unique key to force component refresh on page change
-        aggregationKey: `agg:${getPage(url) || 1}:${getLimit(url, route, 5)}`
+        offset: pageToOffset(getPage(url) || 1, getLimit(url, route, 5))
     };
 };

src/routes/(console)/organization-[organization]/billing/planSummary.svelte

@@ -31,16 +31,14 @@
         availableCredit = undefined,
         currentAggregation = undefined,
         limit = undefined,
-        offset = undefined,
-        aggregationKey = undefined
+        offset = undefined
     }: {
         currentPlan: Plan;
         nextPlan?: Plan | null;
         availableCredit?: number | undefined;
         currentAggregation?: AggregationTeam | undefined;
         limit?: number | undefined;
         offset?: number | undefined;
-        aggregationKey?: string | undefined;
     } = $props();
 
     let showCancel = $state(false);
@@ -170,6 +168,10 @@
             0
     );
 
+    const aggregationKey = $derived(
+        `agg:${Number(page.url.searchParams.get('page')) || 1}:${projectsLimit}`
+    );
+
     function getBillingData(currentPlan, currentAggregation, isSmallViewport) {
         const projectsList = getProjectsList(currentAggregation);
         const basePlan = {