Range Widget: Add a skeleton for loading state

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Range Widget: Add a skeleton for loading state [#681](https://github.com/CartoDB/carto-react/pull/681)
 - Avoid reset of Table widget to page 0 when not necessary [#685](https://github.com/CartoDB/carto-react/pull/685)
 - Fix widget calculation with very large viewports/masks [#680](https://github.com/CartoDB/carto-react/pull/680)
 - Storybook: show figma codes/theme code snippets for colors [#684](https://github.com/CartoDB/carto-react/pull/684)

packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, screen, waitFor } from '../widgets/utils/testUtils';
-import RangeWidgetUI from '../../src/widgets/RangeWidgetUI';
+import RangeWidgetUI from '../../src/widgets/RangeWidgetUI/RangeWidgetUI';
 
 describe('RangeWidgetUI', () => {
   const Widget = (props) => <RangeWidgetUI min={0} max={100} {...props} />;

packages/react-ui/src/index.d.ts

@@ -16,7 +16,7 @@ import {
   useTimeSeriesContext,
   TimeSeriesProvider
 } from './widgets/TimeSeriesWidgetUI/hooks/TimeSeriesContext';
-import RangeWidgetUI from './widgets/RangeWidgetUI';
+import RangeWidgetUI from './widgets/RangeWidgetUI/RangeWidgetUI';
 import useTimeSeriesInteractivity from './widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity';
 import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';
 import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI';

packages/react-ui/src/index.js

@@ -13,7 +13,7 @@ import LegendRamp from './widgets/legend/LegendRamp';
 import ScatterPlotWidgetUI from './widgets/ScatterPlotWidgetUI';
 import TimeSeriesWidgetUI from './widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI';
 import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI';
-import RangeWidgetUI from './widgets/RangeWidgetUI';
+import RangeWidgetUI from './widgets/RangeWidgetUI/RangeWidgetUI';
 import ComparativeFormulaWidgetUI from './widgets/comparative/ComparativeFormulaWidgetUI/ComparativeFormulaWidgetUI';
 import ComparativeCategoryWidgetUI from './widgets/comparative/ComparativeCategoryWidgetUI/ComparativeCategoryWidgetUI';
 import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants';

packages/react-ui/src/widgets/RangeWidgetUI/RangeSkeleton.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Grid, styled } from '@mui/material';
+import { Skeleton } from '@mui/material';
+import { SkeletonSolid } from '../SkeletonWidgets';
+
+const Root = styled(Grid)(({ theme }) => ({
+  position: 'relative',
+  alignItems: 'center',
+  height: theme.spacing(4)
+}));
+
+const DotsContainer = styled(Grid)(({ theme }) => ({
+  position: 'absolute',
+  zIndex: 1,
+  padding: theme.spacing(0, 3)
+}));
+
+const RangeSkeleton = () => {
+  return (
+    <Grid container>
+      <Root container item>
+        <DotsContainer container item justifyContent='space-between'>
+          <SkeletonSolid variant='circular' width={12} height={12} />
+          <SkeletonSolid variant='circular' width={12} height={12} />
+        </DotsContainer>
+
+        <Skeleton height={2} width='100%' />
+      </Root>
+
+      <Grid container item justifyContent='space-between'>
+        <Skeleton width={56} height={32} />
+        <Skeleton width={56} height={32} />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default RangeSkeleton;

packages/react-ui/src/widgets/RangeWidgetUI.js → packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js

@@ -2,7 +2,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Link, Slider, TextField, styled } from '@mui/material';
 import { debounce } from '@carto/react-core';
-import Typography from '../components/atoms/Typography';
+import Typography from '../../components/atoms/Typography';
+import RangeSkeleton from './RangeSkeleton';
 
 const Root = styled(Box)(() => ({
   position: 'relative'
@@ -79,10 +80,11 @@ const SliderLimit = styled(Slider)(({ theme: { palette, spacing } }) => ({
  * @param  {number} props.max - The absolute max value
  * @param  {number[]} props.limits - Array of two numbers that represent a relative min and max values. It is useful to represent the min and max value taking into account other filters.
  * @param  {Function} [props.onSelectedRangeChange] - This fuction will be cal when selected values change
+ * @param {boolean} [props.isLoading] - If true, the component will render a skeleton
 
  */
 
-function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) {
+function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange, isLoading }) {
   const [sliderValues, setSliderValues] = useState([min, max]);
   const [inputsValues, setInputsValues] = useState([min, max]);
 
@@ -155,6 +157,10 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) {
     changeSliderValues([min, max]);
   };
 
+  if (isLoading) {
+    return <RangeSkeleton />;
+  }
+
   return (
     <Root>
       <ClearWrapper>
@@ -219,7 +225,8 @@ RangeWidgetUI.propTypes = {
   min: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
   limits: PropTypes.arrayOf(PropTypes.number),
-  onSelectedRangeChange: PropTypes.func
+  onSelectedRangeChange: PropTypes.func,
+  isLoading: PropTypes.bool
 };
 
 export default RangeWidgetUI;

packages/react-ui/src/widgets/SkeletonWidgets.js

@@ -53,3 +53,7 @@ export const SkeletonThinBarItem = styled(Skeleton)(({ theme }) => ({
     marginLeft: '1px'
   }
 }));
+
+export const SkeletonSolid = styled(Skeleton)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[100]
+}));

packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import RangeWidgetUI from '../../../src/widgets/RangeWidgetUI';
+import RangeWidgetUI from '../../../src/widgets/RangeWidgetUI/RangeWidgetUI';
+import { Label, ThinContainer } from '../../utils/storyStyles';
 
 const options = {
   title: 'Organisms/Widgets/RangeWidgetUI',
@@ -19,7 +20,39 @@ const Template = (args) => {
   return <RangeWidgetUI {...args} />;
 };
 
-// TODO
+const LoadingTemplate = (args) => {
+  if (args.series && !Array.isArray(args.series)) {
+    args.series = [];
+  }
+
+  return (
+    <>
+      <Label variant='body1' mb={3}>
+        {'Limited width'}
+      </Label>
+      <ThinContainer>
+        <RangeWidgetUI {...args} />
+      </ThinContainer>
+
+      <Label variant='body1' mt={8} mb={3}>
+        {'Responsive'}
+      </Label>
+      <RangeWidgetUI {...args} />
+    </>
+  );
+};
+
+const data = {
+  data: [400, 500],
+  min: 0,
+  max: 1000,
+  limits: [300, 950]
+};
+
 export const Default = Template.bind({});
-const DefaultProps = { data: [400, 500], min: 0, max: 1000, limits: [300, 950] };
+const DefaultProps = { ...data };
 Default.args = DefaultProps;
+
+export const Loading = LoadingTemplate.bind({});
+const LoadingProps = { ...data, isLoading: true };
+Loading.args = LoadingProps;

packages/react-widgets/src/widgets/RangeWidget.js

@@ -145,6 +145,7 @@ function RangeWidget({
             {...(Number.isFinite(data.min) &&
               Number.isFinite(data.max) && { limits: [data.min, data.max] })}
             onSelectedRangeChange={handleSelectedRangeChange}
+            isLoading={isLoading}
           />
         )}
       </WidgetWithAlert>