feat(pci.savings-plan): loading skeleton (#15128)

* feat(pci.savings-plan): improve dashbard ui ref: TAPC-2358 Signed-off-by: Eric Ciccotti <[email protected]>
ovh · Jan 28, 2025 · ebbcb15 · ebbcb15
1 parent 284d219
commit ebbcb15
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 34 deletions.
diff --git a/...pps/pci-savings-plan/src/components/Dashboard/ConsumptionDatagrid/ConsumptionDatagrid.tsx b/...pps/pci-savings-plan/src/components/Dashboard/ConsumptionDatagrid/ConsumptionDatagrid.tsx
@@ -1,39 +1,53 @@
-import {
-  Datagrid,
-  DataGridTextCell,
-  Title,
-} from '@ovh-ux/manager-react-components';
+import { Datagrid, DataGridTextCell } from '@ovh-ux/manager-react-components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { OdsText } from '@ovhcloud/ods-components/react';
+import { OdsSkeleton, OdsText } from '@ovhcloud/ods-components/react';
 import { savingsPlanConsumptionMocked } from '@/_mock_/savingsPlanConsumption';
 
-const ConsumptionDatagrid = () => {
+const ConsumptionDatagrid = ({
+  isLoading,
+}: Readonly<{ isLoading: boolean }>) => {
   const { t } = useTranslation('dashboard');
   const columns = [
     {
       label: t('dashboard_columns_start'),
       id: 'begin',
-      cell: (props: any) => <DataGridTextCell>{props.begin}</DataGridTextCell>,
+      cell: (props: any) =>
+        isLoading ? (
+          <OdsSkeleton />
+        ) : (
+          <DataGridTextCell>{props.begin}</DataGridTextCell>
+        ),
     },
     {
       label: t('dashboard_columns_end'),
       id: 'end',
-      cell: (props: any) => <DataGridTextCell>{props.end}</DataGridTextCell>,
+      cell: (props: any) =>
+        isLoading ? (
+          <OdsSkeleton />
+        ) : (
+          <DataGridTextCell>{props.end}</DataGridTextCell>
+        ),
     },
     {
       label: t('dashboard_columns_consumption_size'),
       id: 'consumption_size',
-      cell: (props: any) => (
-        <DataGridTextCell>{props.consumption_size}</DataGridTextCell>
-      ),
+      cell: (props: any) =>
+        isLoading ? (
+          <OdsSkeleton />
+        ) : (
+          <DataGridTextCell>{props.consumption_size}</DataGridTextCell>
+        ),
     },
     {
       label: t('dashboard_columns_cumul_plan_size'),
       id: 'cumul_plan_size',
-      cell: (props: any) => (
-        <DataGridTextCell>{props.cumul_plan_size}</DataGridTextCell>
-      ),
+      cell: (props: any) =>
+        isLoading ? (
+          <OdsSkeleton />
+        ) : (
+          <DataGridTextCell>{props.cumul_plan_size}</DataGridTextCell>
+        ),
     },
   ];
 

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Filters/Filters.tsx b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Filters/Filters.tsx
@@ -2,12 +2,11 @@ import {
   OdsSelectChangeEventDetail,
   OdsSelectCustomEvent,
 } from '@ovhcloud/ods-components';
-import { OdsSelect } from '@ovhcloud/ods-components/react';
+import { OdsSelect, OdsSkeleton } from '@ovhcloud/ods-components/react';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getInstancesInformation, isInstanceFlavor } from '@/utils/savingsPlan';
 import { InstanceTechnicalName, ResourceType } from '@/types/CreatePlan.type';
-import useTechnicalInfo from '@/hooks/useCatalogCommercial';
 import { SavingsPlanService } from '@/types';
 import { getLastTwelveMonths } from '@/utils/formatter/date';
 
@@ -18,19 +17,28 @@ const SelectWithLabel = <T extends string>({
   name,
   onChange,
   value,
+  isLoading,
 }: {
   label: string;
   options: { label: string; value: T }[];
   placeholder: string;
   name: string;
   onChange: (value: T) => void;
   value: T;
+  isLoading: boolean;
 }) => {
   const onChangeEvent = (
     event: OdsSelectCustomEvent<OdsSelectChangeEventDetail>,
   ) => {
     onChange(event.target.value as T);
   };
+  if (isLoading) {
+    return (
+      <div className="flex flex-col w-64">
+        <OdsSkeleton />
+      </div>
+    );
+  }
 
   return (
     <div className="flex flex-col w-64">
@@ -62,9 +70,15 @@ interface FiltersProps {
   defaultFilter: SavingsPlanService;
   savingsPlan: SavingsPlanService[];
   locale: string;
+  isLoading: boolean;
 }
 
-const Filters = ({ defaultFilter, savingsPlan, locale }: FiltersProps) => {
+const Filters = ({
+  defaultFilter,
+  savingsPlan,
+  locale,
+  isLoading,
+}: FiltersProps) => {
   const lastTwelveMonths = useMemo(() => getLastTwelveMonths(locale), [locale]);
 
   const [resource, setResource] = useState<ResourceType>(ResourceType.instance);
@@ -144,6 +158,7 @@ const Filters = ({ defaultFilter, savingsPlan, locale }: FiltersProps) => {
   return (
     <div className="flex flex-row gap-4">
       <SelectWithLabel
+        isLoading={isLoading}
         label={t('dashboard_select_label_resource')}
         value={resource}
         onChange={(value) => {
@@ -155,6 +170,7 @@ const Filters = ({ defaultFilter, savingsPlan, locale }: FiltersProps) => {
         name="resource"
       />
       <SelectWithLabel
+        isLoading={isLoading}
         label={t('dashboard_select_label_flavor')}
         options={instanceRangeOptions}
         placeholder={t('dashboard_select_placeholder_flavor')}
@@ -164,6 +180,7 @@ const Filters = ({ defaultFilter, savingsPlan, locale }: FiltersProps) => {
         onChange={(value) => setFlavor(value)}
       />
       <SelectWithLabel
+        isLoading={isLoading}
         label={t('dashboard_select_label_model')}
         options={modelOptions}
         placeholder={t('dashboard_select_placeholder_model')}
@@ -172,6 +189,7 @@ const Filters = ({ defaultFilter, savingsPlan, locale }: FiltersProps) => {
         onChange={setModel}
       />
       <SelectWithLabel
+        isLoading={isLoading}
         label={t('dashboard_select_label_period')}
         options={lastTwelveMonths.map((month) => ({
           label: month,

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Kpis/Kpis.tsx b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Kpis/Kpis.tsx
@@ -1,6 +1,10 @@
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
-import { OdsText, OdsTooltip, OdsIcon } from '@ovhcloud/ods-components/react';
+import {
+  OdsText,
+  OdsTooltip,
+  OdsIcon,
+  OdsSkeleton,
+} from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,12 +13,20 @@ const Kpi = ({
   value,
   tooltip,
   index,
+  isLoading,
 }: {
   title: string;
   value: number;
   tooltip: string;
   index: number;
+  isLoading: boolean;
 }) => {
+  if (isLoading)
+    return (
+      <div className="h-16 w-[200px] mx-2 flex flex-col justify-center">
+        <OdsSkeleton />
+      </div>
+    );
   return (
     <div className="flex flex-col gap-2 w-[200px]">
       <OdsText preset="heading-5" className="max-w-lg">
@@ -39,7 +51,7 @@ const Kpi = ({
   );
 };
 
-const Kpis = () => {
+const Kpis = ({ isLoading }: Readonly<{ isLoading: boolean }>) => {
   const { t } = useTranslation('dashboard');
   const data = [
     {
@@ -63,17 +75,16 @@ const Kpis = () => {
     <div className="flex flex-row gap-4 items-center mt-7">
       {data.map((item, index) => (
         <React.Fragment key={item.title}>
-          <div key={item.title}>
-            <Kpi
-              title={item.title}
-              value={item.value}
-              tooltip={item.tooltip}
-              index={index}
-            />
-            {index < data.length - 1 && (
-              <div className="h-16 w-px bg-gray-300 mx-2"></div>
-            )}
-          </div>
+          <Kpi
+            title={item.title}
+            value={item.value}
+            tooltip={item.tooltip}
+            index={index}
+            isLoading={isLoading}
+          />
+          {index < data.length - 1 && (
+            <div className="h-16 w-px bg-gray-300 mx-2"></div>
+          )}
         </React.Fragment>
       ))}
     </div>

diff --git a/packages/manager/apps/pci-savings-plan/src/pages/dashboard/index.tsx b/packages/manager/apps/pci-savings-plan/src/pages/dashboard/index.tsx
@@ -43,9 +43,10 @@ const Dashboard: React.FC = () => {
         defaultFilter={currentPlan}
         savingsPlan={savingsPlan}
         locale={locale}
+        isLoading={isLoading}
       />
-      <Kpis />
-      <ConsumptionDatagrid />
+      <Kpis isLoading={isLoading} />
+      <ConsumptionDatagrid isLoading={isLoading} />
     </>
   );
 };