refactor(console): refactor useSubscriptionPlans hook (#4157)

packages/console/src/hooks/use-subscription-plans.ts

@@ -1,3 +1,4 @@
+import { type Optional } from '@silverhand/essentials';
 import { useMemo } from 'react';
 
 import { communitySupportEnabledMap, ticketSupportResponseTimeMap } from '@/consts/subscriptions';
@@ -8,26 +9,28 @@ import { useCloudSwr } from '../cloud/hooks/use-cloud-swr';
 const useSubscriptionPlans = () => {
   const { data: subscriptionPlansResponse, error } = useCloudSwr('/api/subscription-plans');
 
-  const subscriptionPlans: SubscriptionPlan[] = useMemo(
-    () =>
-      subscriptionPlansResponse?.map((plan) => {
-        const { name, quota } = plan;
+  const subscriptionPlans: Optional<SubscriptionPlan[]> = useMemo(() => {
+    if (!subscriptionPlansResponse) {
+      return;
+    }
 
-        return {
-          ...plan,
-          quota: {
-            ...quota,
-            communitySupportEnabled: communitySupportEnabledMap[name] ?? false, // Fallback to not supported
-            ticketSupportResponseTime: ticketSupportResponseTimeMap[name] ?? 0, // Fallback to not supported
-          },
-        };
-      }) ?? [],
-    [subscriptionPlansResponse]
-  );
+    return subscriptionPlansResponse.map((plan) => {
+      const { name, quota } = plan;
+
+      return {
+        ...plan,
+        quota: {
+          ...quota,
+          communitySupportEnabled: communitySupportEnabledMap[name] ?? false, // Fallback to not supported
+          ticketSupportResponseTime: ticketSupportResponseTimeMap[name] ?? 0, // Fallback to not supported
+        },
+      };
+    });
+  }, [subscriptionPlansResponse]);
 
   return {
-    isLoading: !subscriptionPlansResponse && !error,
     data: subscriptionPlans,
+    error,
   };
 };
 

packages/console/src/pages/TenantSettings/Subscription/PlanQuotaTable/index.tsx

@@ -2,25 +2,27 @@ import { conditional } from '@silverhand/essentials';
 import { useMemo } from 'react';
 
 import Success from '@/assets/icons/success.svg';
+import PlanName from '@/components/PlanName';
 import { enterprisePlanTableData, planTableGroupKeyMap } from '@/consts/subscriptions';
 import DynamicT from '@/ds-components/DynamicT';
 import Table from '@/ds-components/Table';
 import { type RowGroup, type Column } from '@/ds-components/Table/types';
-import useSubscriptionPlans from '@/hooks/use-subscription-plans';
 import {
   type SubscriptionPlanTableRow,
   type SubscriptionPlanTableGroupKey,
+  type SubscriptionPlan,
 } from '@/types/subscriptions';
 
-import PlanName from './PlanName';
 import PlanQuotaGroupKeyLabel from './PlanQuotaGroupKeyLabel';
 import PlanQuotaKeyLabel from './PlanQuotaKeyLabel';
 import * as styles from './index.module.scss';
 import { constructPlanTableDataArray } from './utils';
 
-function PlanQuotaTable() {
-  const { data: subscriptionPlans, isLoading } = useSubscriptionPlans();
+type Props = {
+  subscriptionPlans: SubscriptionPlan[];
+};
 
+function PlanQuotaTable({ subscriptionPlans }: Props) {
   const quotaTableRowGroups: Array<RowGroup<SubscriptionPlanTableRow>> = useMemo(() => {
     const tableDataArray = [
       ...constructPlanTableDataArray(subscriptionPlans),
@@ -64,7 +66,6 @@ function PlanQuotaTable() {
     <div className={styles.container}>
       <Table
         isRowHoverEffectDisabled
-        isLoading={isLoading}
         rowGroups={quotaTableRowGroups}
         rowIndexKey="quotaKey"
         rowClassName={(_, index) => conditional(index % 2 !== 0 && styles.colorRow)}

packages/console/src/pages/TenantSettings/Subscription/index.tsx

@@ -1,14 +1,28 @@
 import { withAppInsights } from '@logto/app-insights/react';
 
 import PageMeta from '@/components/PageMeta';
+import useSubscriptionPlans from '@/hooks/use-subscription-plans';
+
+import Skeleton from '../components/Skeleton';
 
 import PlanQuotaTable from './PlanQuotaTable';
 
 function Subscription() {
+  const { data: subscriptionPlans, error } = useSubscriptionPlans();
+  const isLoading = !subscriptionPlans && !error;
+
+  if (isLoading) {
+    return <Skeleton />;
+  }
+
+  if (!subscriptionPlans) {
+    return null;
+  }
+
   return (
     <div>
       <PageMeta titleKey={['tenants.tabs.subscription', 'tenants.title']} />
-      <PlanQuotaTable />
+      <PlanQuotaTable subscriptionPlans={subscriptionPlans} />
     </div>
   );
 }

packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx

@@ -6,10 +6,11 @@ import FormField from '@/ds-components/FormField';
 import useCustomDomain from '@/hooks/use-custom-domain';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 
+import Skeleton from '../components/Skeleton';
+
 import AddDomainForm from './AddDomainForm';
 import CustomDomain from './CustomDomain';
 import DefaultDomain from './DefaultDomain';
-import Skeleton from './Skeleton';
 import * as styles from './index.module.scss';
 
 function TenantDomainSettings() {