skeleton improvements

CartoDB · Sep 7, 2023 · b4e2dbb · b4e2dbb
1 parent ceceff6
commit b4e2dbb
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 42 deletions.
diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js
@@ -1,5 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { Box, capitalize, Link, useTheme, styled } from '@mui/material';
+
+import { BREAKPOINTS } from '../../theme/themeConstants';
 import TimeSeriesChart from './components/TimeSeriesChart';
 import TimeSeriesLegend from './components/TimeSeriesLegend';
 import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesContext';
@@ -30,6 +32,10 @@ const FORMAT_DATE_BY_STEP_SIZE_FOR_TIME_WINDOW = {
   [GroupDateTypes.MINUTES]: minutesCurrentDateRange
 };
 
+const Root = styled(Box)(({ theme }) => ({
+  containerType: 'inline-size'
+}));
+
 const BoxVert = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column'
@@ -42,15 +48,23 @@ const BoxHorz = styled(Box)(({ theme }) => ({
 
 const ControlsBox = styled(Box)(({ theme }) => ({
   flexShrink: 0,
+  marginLeft: 0,
   paddingLeft: theme.spacing(1),
+  [`@container (max-width: ${BREAKPOINTS.XS}px)`]: {
+    paddingLeft: 0,
+  },
   paddingBottom: theme.spacing(3),
   alignSelf: 'flex-end'
 }));
 
 const ChartBox = styled(Box)(({ theme }) => ({
   flex: 1,
   minWidth: 0,
-  paddingLeft: theme.spacing(2.5)
+
+  paddingLeft: theme.spacing(5),
+  [`@container (max-width: ${BREAKPOINTS.XS}px)`]: {
+    paddingLeft: theme.spacing(1)
+  }
 }));
 
 function TimeSeriesWidgetUI({
@@ -78,7 +92,7 @@ function TimeSeriesWidgetUI({
   palette,
   showLegend
 }) {
-  if (isLoading) return <TimeSeriesSkeleton height={height} />;
+  if (isLoading) return <TimeSeriesSkeleton height={height} showLegend={showLegend} />;
 
   return (
     <TimeSeriesProvider
@@ -327,7 +341,7 @@ function TimeSeriesWidgetUIContent({
     />
   );
   return (
-    <Box>
+    <Root>
       <Box display='flex' justifyContent='space-between' alignItems='center'>
         {!!currentDate && (
           <Box>
@@ -366,7 +380,7 @@ function TimeSeriesWidgetUIContent({
           {legend}
         </BoxVert>
       )}
-    </Box>
+    </Root>
   );
 }
 

diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesLegend.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesLegend.js
@@ -36,14 +36,13 @@ const OverflowVeil = styled(Box)(({ theme }) => ({
   bottom: theme.spacing(1),
   zIndex: 10,
   width: theme.spacing(2.5),
-  // height: '100%',
   background: `linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)`
 }));
 
 const ShowMoreButtons = styled(Box)(({ theme }) => ({
   position: 'absolute',
-  padding: theme.spacing(1, 1),
-  top: theme.spacing(0.25),
+  padding: theme.spacing(0.5, 1),
+  top: theme.spacing(0.5),
   right: 0,
   background: theme.palette.background.paper
 }));

diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesSkeleton.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesSkeleton.js
@@ -1,40 +1,57 @@
 import React from 'react';
 import { Box, Grid, styled } from '@mui/material';
 import { Skeleton } from '@mui/material';
-import { SKELETON_HEIGHT, SkeletonBarsGrid } from '../../SkeletonWidgets';
+import { SkeletonBarsGrid } from '../../SkeletonWidgets';
 import { BREAKPOINTS } from '../../../theme/themeConstants';
 import GraphLine from '../../../assets/images/GraphLine';
+import { getSpacing } from '../../../theme/themeUtils';
 
-const Root = styled(Grid)(({ theme }) => ({
-  alignItems: 'stretch',
+const Root = styled(Grid)(() => ({
   containerType: 'inline-size',
-
-  [`@container (max-width: ${BREAKPOINTS.XS}px)`]: {
-    ' > div': {
-      marginRight: 0
-    }
-  }
+  gap: 0,
+  margin: 0,
+  padding: 0
 }));
 
 const Controls = styled(Grid)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'space-between',
-  marginRight: theme.spacing(4)
+  justifyContent: 'flex-end',
+  margin: 0,
+  paddingLeft: theme.spacing(1),
+  paddingBottom: theme.spacing(3),
+  gap: theme.spacing(2),
+  [`@container (max-width: ${BREAKPOINTS.XS}px)`]: {
+    paddingLeft: 0
+  }
 }));
 
 const Graph = styled(Grid)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'flex-end',
-  marginBottom: theme.spacing(2)
+  margin: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: theme.spacing(5),
+  [`@container (max-width: ${BREAKPOINTS.XS}px)`]: {
+    paddingLeft: theme.spacing(1)
+  }
+}));
+
+const Legend = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  gap: theme.spacing(2),
+  margin: 0,
+  padding: theme.spacing(2.25, 0.5)
 }));
 
 const SkeletonGraphLine = styled(SkeletonBarsGrid)(({ theme }) => ({
   svg: {
     width: '100%',
     height: 'auto',
-    minHeight: theme.spacing(20),
     paddingTop: theme.spacing(4),
     fontSize: 'initial',
     fill: 'none',
@@ -45,28 +62,42 @@ const SkeletonGraphLine = styled(SkeletonBarsGrid)(({ theme }) => ({
   }
 }));
 
-const TimeSeriesSkeleton = ({ height }) => {
+const TimeSeriesSkeleton = ({ height, showLegend = true }) => {
   return (
-    <Root container height={height || SKELETON_HEIGHT}>
+    <Root container>
+      <Grid item xs={12} pt={1} pb={1}>
+        <Skeleton width={48} height={8} />
+      </Grid>
       <Controls item>
         <Grid item>
-          <Skeleton width={48} height={8} />
-        </Grid>
-
-        <Grid item>
-          {[...Array(3)].map((_, i) => (
-            <Box key={i} mt={2}>
-              <Skeleton width={24} height={24} />
-            </Box>
-          ))}
+          <Box>
+            <Skeleton width={24} height={24} />
+          </Box>
+          <Box mt={2}>
+            <Skeleton width={24} height={24} />
+          </Box>
+          <Box mt={1}>
+            <Skeleton width={24} height={24} />
+          </Box>
         </Grid>
       </Controls>
 
-      <Graph item xs>
-        <SkeletonGraphLine height='80%'>
+      <Graph item xs height={height || getSpacing(22)}>
+        <SkeletonGraphLine>
           <GraphLine preserveAspectRatio='none' />
         </SkeletonGraphLine>
+        <Box display='flex' flexDirection='row' gap='20px' pt={1} pb={1}>
+          <Skeleton width={48} height={8} />
+          <Skeleton width={48} height={8} />
+        </Box>
       </Graph>
+
+      {showLegend && (
+        <Legend item xs={12}>
+          <Skeleton width={48} height={8} />
+          <Skeleton width={48} height={8} />
+        </Legend>
+      )}
     </Root>
   );
 };

diff --git a/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js
@@ -70,8 +70,16 @@ const dataSplitByCategory = data.reduce((acc, { name, value }) => {
   acc.push({ name, value, category: 'Mars' });
   acc.push({ name, value: Math.sin(name / 10000) * 30 + 30, category: 'Venus' });
   acc.push({ name, value: Math.cos(name / 700000 + 10) * 100 + 100, category: 'Earth' });
-  acc.push({ name, value: Math.cos(name / 200000 + 10) * 100 + 100, category: 'Foobar - only for test' });
-  acc.push({ name, value: Math.cos(name / 900000 + 10) * 100 + 100, category: 'Very long category to test for scroll support' });
+  acc.push({
+    name,
+    value: Math.cos(name / 200000 + 10) * 100 + 100,
+    category: 'Foobar - only for test'
+  });
+  acc.push({
+    name,
+    value: Math.cos(name / 900000 + 10) * 100 + 100,
+    category: 'Very long category to test for scroll support'
+  });
   return acc;
 }, []);
 
@@ -145,8 +153,7 @@ const options = {
         'Event emitted when timeWindow is updated. TimeSeriesWidget is responsible of applying the filter.'
     },
     showLegend: {
-      description:
-        `Whether to show legend. By default it's shown only for if data contains multiple series.`
+      description: `Whether to show legend. By default it's shown only for if data contains multiple series.`
     }
   },
   parameters: {
@@ -181,19 +188,31 @@ const LoadingTemplate = (args) => {
     args.timeWindow = [];
   }
 
+  const [selectedCategories, setSelectedCategories] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(args.isLoading);
   return (
     <>
       <Label variant='body1' mb={3}>
-        {'Limited width'}
+        {'Limited width'} <button onClick={() => setIsLoading(!isLoading)}>toggle</button>
       </Label>
       <ThinContainer>
-        <TimeSeriesWidgetUI {...args} />
+        <TimeSeriesWidgetUI
+          {...args}
+          isLoading={isLoading}
+          selectedCategories={selectedCategories}
+          onSelectedCategoriesChange={setSelectedCategories}
+        />
       </ThinContainer>
 
       <Label variant='body1' mt={8} mb={3}>
         {'Responsive'}
       </Label>
-      <TimeSeriesWidgetUI {...args} />
+      <TimeSeriesWidgetUI
+        {...args}
+        isLoading={isLoading}
+        selectedCategories={selectedCategories}
+        onSelectedCategoriesChange={setSelectedCategories}
+      />
     </>
   );
 };
@@ -207,11 +226,11 @@ const requiredProps = {
 export const Default = Template.bind({});
 Default.args = requiredProps;
 
-export const MultipleSeries = Template.bind({});
+export const MultipleSeries = LoadingTemplate.bind({});
 MultipleSeries.args = {
   ...requiredProps,
   data: dataSplitByCategory
 };
 
 export const Loading = LoadingTemplate.bind({});
-Loading.args = { ...requiredProps, isLoading: true };
+Loading.args = { ...requiredProps, isLoading: true, showLegend: true };