Small cleanups

grommet · Apr 1, 2024 · 54477e5 · 54477e5
1 parent 1fca358
commit 54477e5
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 200 deletions.
diff --git a/sandbox/grommet-app/src/pages/FeaturedServices.jsx b/sandbox/grommet-app/src/pages/FeaturedServices.jsx
@@ -4,6 +4,7 @@ import services from '../mockData/services.json';
 import { Card } from '../components';
 import { LinkNext } from 'grommet-icons';
 import ContentPane from '../components/ContentPane';
+import { skeleton as skeletonAnimation, useLoading } from '../utils/skeleton';
 
 const TabContent = ({ data, ...rest }) => (
   <Grid columns="small" gap="medium" pad={{ vertical: 'medium' }} {...rest}>
@@ -27,12 +28,13 @@ TabContent.propTypes = {
 export const FeaturedServices = () => {
   let categories = services.services.map(service => service.category);
   categories = [...new Set(categories)].sort();
-
+  const skeleton = useLoading(350);
   return (
     <ContentPane
       heading="Featured services"
       level={2}
       actions={<Anchor href="#" label="View catalog" />}
+      skeleton={skeleton ? skeletonAnimation : undefined}
     >
       <Tabs justify="start">
         <Tab title="Recommended">

diff --git a/sandbox/grommet-app/src/pages/GetStarted.jsx b/sandbox/grommet-app/src/pages/GetStarted.jsx
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
-import { Box, Grid, ResponsiveContext } from 'grommet';
+import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
 import { DashboardCard } from '../components';
 import { AppsRounded, UserAdd } from 'grommet-icons';
 import { useContext } from 'react';
-import { SkeletonContext } from '../components';
-
-export const GetStarted = ({ kind }) => {
+import { skeleton as skeletonAnimation, useLoading } from '../utils/skeleton';
+export const GetStarted = ({ kind, heading }) => {
   const size = useContext(ResponsiveContext);
-  const skeleton = useContext(SkeletonContext);
+  const skeleton = useLoading(150);
   let kindStyles = {};
   if (kind === 'next')
     kindStyles = {
@@ -23,46 +22,54 @@ export const GetStarted = ({ kind }) => {
       },
     };
   return (
-    <Grid
-      columns={
-        ['medium', 'small', 'xsmall'].includes(size)
-          ? ['auto']
-          : ['flex', 'flex']
-      }
-      gap="medium"
-    >
-      <DashboardCard
-        title="Find services"
-        subtitle="Discover and launch services from our catalog."
-        icon={
-          !skeleton ? (
-            <Box background={{ dark: true }} {...kindStyles.container}>
-              <AppsRounded
-                size="xxlarge"
-                color="primary"
-                {...kindStyles.icon}
-              />
-            </Box>
-          ) : undefined
-        }
-        level={2}
-      />
-      <DashboardCard
-        title="Manage workspace"
-        level={2}
-        subtitle="Set up this workspace, users, access, and more."
-        icon={
-          !skeleton ? (
-            <Box {...kindStyles.container}>
-              <UserAdd color="purple" size="xxlarge" {...kindStyles.icon} />
-            </Box>
-          ) : undefined
+    <Box gap="medium" skeleton={skeleton ? skeletonAnimation : undefined}>
+      {heading ? (
+        <Heading level={1} size="small" margin="none">
+          Get started
+        </Heading>
+      ) : undefined}
+      <Grid
+        columns={
+          ['medium', 'small', 'xsmall'].includes(size)
+            ? ['auto']
+            : ['flex', 'flex']
         }
-      />
-    </Grid>
+        gap="medium"
+      >
+        <DashboardCard
+          title="Find services"
+          subtitle="Discover and launch services from our catalog."
+          icon={
+            !skeleton ? (
+              <Box background={{ dark: true }} {...kindStyles.container}>
+                <AppsRounded
+                  size="xxlarge"
+                  color="primary"
+                  {...kindStyles.icon}
+                />
+              </Box>
+            ) : undefined
+          }
+          level={2}
+        />
+        <DashboardCard
+          title="Manage workspace"
+          level={2}
+          subtitle="Set up this workspace, users, access, and more."
+          icon={
+            !skeleton ? (
+              <Box {...kindStyles.container}>
+                <UserAdd color="purple" size="xxlarge" {...kindStyles.icon} />
+              </Box>
+            ) : undefined
+          }
+        />
+      </Grid>
+    </Box>
   );
 };
 
 GetStarted.propTypes = {
+  heading: PropTypes.bool,
   kind: PropTypes.oneOf(['next', 'push']),
 };
diff --git a/sandbox/grommet-app/src/pages/index.jsx b/sandbox/grommet-app/src/pages/index.jsx
@@ -20,7 +20,7 @@ function Home() {
           gap={size === 'medium' ? 'large' : 'xlarge'}
         >
           <Box gap="large">
-            <GetStarted />
+            <GetStarted heading />
             <RecentServices />
             <FeaturedServices />
           </Box>

diff --git a/sandbox/grommet-app/src/pages/next/Learn.jsx b/sandbox/grommet-app/src/pages/next/Learn.jsx
@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import { Box, Heading } from 'grommet';
 import { DashboardCard } from '../../components';
-import { useContext } from 'react';
-import { SkeletonContext } from '../../components';
+import {
+  skeleton as skeletonAnimation,
+  useLoading,
+} from '../../utils/skeleton';
 
 const data = [
   {
@@ -26,13 +28,13 @@ const data = [
 ];
 
 export const Learn = ({ inline }) => {
-  const skeleton = useContext(SkeletonContext);
+  const skeleton = useLoading(200);
   return (
     <Box gap="medium">
       <Heading level={2} margin="none">
         Learn
       </Heading>
-      <Box gap="medium" skeleton={skeleton}>
+      <Box gap="medium" skeleton={skeleton ? skeletonAnimation : undefined}>
         {data.map(datum => (
           <DashboardCard
             key={datum.title}

diff --git a/sandbox/grommet-app/src/pages/next/QuickActions.jsx b/sandbox/grommet-app/src/pages/next/QuickActions.jsx
@@ -9,12 +9,12 @@ import {
   UserAdd,
 } from 'grommet-icons';
 import { useContext } from 'react';
-import { SkeletonContext } from '../../components';
 import { ThemeContext } from 'styled-components';
+import { useLoading } from '../../utils/skeleton';
 
 export const QuickActions = ({ edit = true, icons }) => {
   const theme = useContext(ThemeContext);
-  const skeleton = useContext(SkeletonContext);
+  const skeleton = useLoading(200);
   return (
     <Box gap="medium">
       <Box direction="row" align="center" justify="between">
@@ -30,7 +30,7 @@ export const QuickActions = ({ edit = true, icons }) => {
           />
         )}
       </Box>
-      <Box gap="small">
+      <Box gap="small" animation={!skeleton ? 'fadeIn' : undefined}>
         {skeleton ? (
           <Skeleton height={theme.text.medium.size} />
         ) : (