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 ( - + {icon && ( @@ -98,6 +99,7 @@ export const DashboardCard = ({ {children} @@ -106,6 +108,7 @@ export const DashboardCard = ({ {skeleton ? : footer} 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 = () => { } > - + {cards ? ( {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} > 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 ( { }} {...(skeleton ? skeletonProps : {})} > - + @@ -94,6 +101,7 @@ const CarbonEmissions = () => { const EnergyConsumption = () => { const { open } = useContext(DisplayContext); const skeleton = useContext(SkeletonContext); + const animation = !skeleton ? 'fadeIn' : undefined; return ( { }} {...(skeleton ? skeletonProps : {})} > - + @@ -161,6 +175,7 @@ const EnergyConsumption = () => { const EnergyCost = () => { const { open } = useContext(DisplayContext); const skeleton = useContext(SkeletonContext); + const animation = !skeleton ? 'fadeIn' : undefined; return ( { }} {...(skeleton ? skeletonProps : {})} > - +