Add fadeIn after skeleton

grommet · Mar 28, 2024 · 01e2842 · 01e2842
1 parent fd16399
commit 01e2842
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
@@ -52,6 +52,7 @@ export const DashboardCard = ({
       }
     : {};
 
+  const animation = !skeleton ? 'fadeIn' : undefined;
   return (
     <Card
       {...inlineProps}
@@ -60,7 +61,7 @@ export const DashboardCard = ({
       {...skeletonProps}
       {...rest}
     >
-      <CardHeader align="start" {...inlineProps}>
+      <CardHeader align="start" animation={animation} {...inlineProps}>
         <Box direction="row" gap="small" align="start">
           {icon && (
             <Box flex={false}>
@@ -98,6 +99,7 @@ export const DashboardCard = ({
         <CardBody
           pad={{ horizontal: 'medium', bottom: !footer ? 'medium' : undefined }}
           {...inlineProps}
+          animation={animation}
         >
           {children}
         </CardBody>
@@ -106,6 +108,7 @@ export const DashboardCard = ({
         <CardFooter
           pad={{ horizontal: 'medium', bottom: 'medium', top: 'medium' }}
           {...inlineProps}
+          animation={animation}
         >
           {skeleton ? <Skeleton height="xxsmall" /> : footer}
         </CardFooter>

diff --git a/sandbox/grommet-app/src/pages/RecentServices.jsx b/sandbox/grommet-app/src/pages/RecentServices.jsx
@@ -34,7 +34,10 @@ export const RecentServices = () => {
         </Box>
       }
     >
-      <Box skeleton={skeleton ? skeletonAnimation : undefined}>
+      <Box
+        skeleton={skeleton ? skeletonAnimation : undefined}
+        animation={!skeleton ? 'fadeIn' : undefined}
+      >
         {cards ? (
           <Grid columns="small" gap="medium">
             {recentServices.map(service => (

diff --git a/sandbox/grommet-app/src/pages/sustainability/Devices.jsx b/sandbox/grommet-app/src/pages/sustainability/Devices.jsx
@@ -1411,6 +1411,7 @@ export const Devices = () => {
         model: { label: 'Model' },
         totalEnergy: { label: 'Total energy' },
       }}
+      animation={!skeleton ? 'fadeIn' : undefined}
     >
       <Toolbar gap="medium" skeleton={skeleton}>
         <Toolbar>

diff --git a/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx b/sandbox/grommet-app/src/pages/sustainability/SustainabilityInsights.jsx
@@ -27,6 +27,7 @@ const skeletonProps = { elevation: 'none' };
 const CarbonEmissions = () => {
   const { open } = useContext(DisplayContext);
   const skeleton = useContext(SkeletonContext);
+  const animation = !skeleton ? 'fadeIn' : undefined;
   return (
     <Card
       title="Carbon emissions"
@@ -38,7 +39,13 @@ const CarbonEmissions = () => {
       }}
       {...(skeleton ? skeletonProps : {})}
     >
-      <Box gap="medium" pad={{ top: 'small' }} flex={false} width="100%">
+      <Box
+        gap="medium"
+        pad={{ top: 'small' }}
+        flex={false}
+        width="100%"
+        animation={animation}
+      >
         <Metric value={132000} unit="MTCO2e" />
         <Collapsible open={open}>
           <Box gap="medium">
@@ -94,6 +101,7 @@ const CarbonEmissions = () => {
 const EnergyConsumption = () => {
   const { open } = useContext(DisplayContext);
   const skeleton = useContext(SkeletonContext);
+  const animation = !skeleton ? 'fadeIn' : undefined;
   return (
     <Card
       title="Energy consumption"
@@ -105,7 +113,13 @@ const EnergyConsumption = () => {
       }}
       {...(skeleton ? skeletonProps : {})}
     >
-      <Box gap="medium" pad={{ top: 'medium' }} flex={false} width="100%">
+      <Box
+        gap="medium"
+        pad={{ top: 'medium' }}
+        flex={false}
+        width="100%"
+        animation={animation}
+      >
         <Metric value={325000} unit="kWh" />
         <Collapsible open={open}>
           <Box gap="medium">
@@ -161,6 +175,7 @@ const EnergyConsumption = () => {
 const EnergyCost = () => {
   const { open } = useContext(DisplayContext);
   const skeleton = useContext(SkeletonContext);
+  const animation = !skeleton ? 'fadeIn' : undefined;
   return (
     <Card
       title="Energy cost"
@@ -172,7 +187,13 @@ const EnergyCost = () => {
       }}
       {...(skeleton ? skeletonProps : {})}
     >
-      <Box gap="medium" pad={{ top: 'medium' }} flex={false} width="100%">
+      <Box
+        gap="medium"
+        pad={{ top: 'medium' }}
+        flex={false}
+        width="100%"
+        animation={animation}
+      >
         <Metric
           value={48750}
           unit="USD"