From 01e28423816431fdb38a94ab9840e2a2581812f3 Mon Sep 17 00:00:00 2001
From: Taylor Seamans <taylor.seamans@yahoo.com>
Date: Thu, 28 Mar 2024 11:49:18 -0700
Subject: [PATCH] Add fadeIn after skeleton

---
 .../DashboardCard/DashboardCard.jsx           |  5 +++-
 .../grommet-app/src/pages/RecentServices.jsx  |  5 +++-
 .../src/pages/sustainability/Devices.jsx      |  1 +
 .../sustainability/SustainabilityInsights.jsx | 27 ++++++++++++++++---
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
index 4c0e0f764..7bbc5248d 100644
--- 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
index 842b51e0c..e3ea49474 100644
--- 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
index e03063613..632b1ab56 100644
--- 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
index e8988a0cf..7ab11c6eb 100644
--- 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"