stories: common LoadingTemplateWithSwitch

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

Hide file tree

Showing 3 changed files with 18 additions and 44 deletions.
diff --git a/packages/react-ui/src/widgets/FormulaWidgetUI/FormulaSkeleton.js b/packages/react-ui/src/widgets/FormulaWidgetUI/FormulaSkeleton.js
@@ -1,8 +1,12 @@
 import React from 'react';
-import { Skeleton } from '@mui/material';
+import { Box, Skeleton } from '@mui/material';
 
 const FormulaSkeleton = () => {
-  return <Skeleton height={24} width={120} />;
+  return (
+    <Box pt={0.5}>
+      <Skeleton height={24} width={120} />
+    </Box>
+  );
 };
 
 export default FormulaSkeleton;
diff --git a/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import FormulaWidgetUI from '../../../src/widgets/FormulaWidgetUI/FormulaWidgetUI';
 import { Label, ThinContainer } from '../../utils/storyStyles';
+import LoadingTemplateWithSwitch from './LoadingTemplateWithSwitch';
 
 const options = {
   title: 'Widgets/FormulaWidgetUI',
@@ -27,23 +28,7 @@ const Template = (args) => {
   return <FormulaWidgetUI {...args} />;
 };
 
-const LoadingTemplate = (args) => {
-  return (
-    <>
-      <Label variant='body1' mb={3}>
-        {'Limited width'}
-      </Label>
-      <ThinContainer>
-        <FormulaWidgetUI {...args} />
-      </ThinContainer>
-
-      <Label variant='body1' mt={8} mb={3}>
-        {'Responsive'}
-      </Label>
-      <FormulaWidgetUI {...args} />
-    </>
-  );
-};
+const LoadingTemplate = LoadingTemplateWithSwitch(FormulaWidgetUI);
 
 const data = 10000;
 

diff --git a/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js
@@ -3,6 +3,7 @@ import TimeSeriesWidgetUI from '../../../src/widgets/TimeSeriesWidgetUI/TimeSeri
 import { GroupDateTypes } from '@carto/react-core';
 import { TIME_SERIES_CHART_TYPES } from '@carto/react-ui';
 import { Label, ThinContainer } from '../../utils/storyStyles';
+import LoadingTemplateWithSwitch from './LoadingTemplateWithSwitch';
 
 const data = [
   { name: 1514761200000, value: 310 },
@@ -183,40 +184,24 @@ const Template = (args) => {
   );
 };
 
-const LoadingTemplate = (args) => {
+const TimeSeriesWidgetUIWithDefaults = (args) => {
   if (args.timeWindow && !Array.isArray(args.timeWindow)) {
     args.timeWindow = [];
   }
 
   const [selectedCategories, setSelectedCategories] = React.useState([]);
-  const [isLoading, setIsLoading] = React.useState(args.isLoading);
-  return (
-    <>
-      <Label variant='body1' mb={3}>
-        {'Limited width'} <button onClick={() => setIsLoading(!isLoading)}>toggle</button>
-      </Label>
-      <ThinContainer>
-        <TimeSeriesWidgetUI
-          {...args}
-          isLoading={isLoading}
-          selectedCategories={selectedCategories}
-          onSelectedCategoriesChange={setSelectedCategories}
-        />
-      </ThinContainer>
 
-      <Label variant='body1' mt={8} mb={3}>
-        {'Responsive'}
-      </Label>
-      <TimeSeriesWidgetUI
-        {...args}
-        isLoading={isLoading}
-        selectedCategories={selectedCategories}
-        onSelectedCategoriesChange={setSelectedCategories}
-      />
-    </>
+  return (
+    <TimeSeriesWidgetUI
+      {...args}
+      selectedCategories={selectedCategories}
+      onSelectedCategoriesChange={setSelectedCategories}
+    />
   );
 };
 
+const LoadingTemplate = LoadingTemplateWithSwitch(TimeSeriesWidgetUIWithDefaults);
+
 const requiredProps = {
   data,
   stepSize: GroupDateTypes.WEEKS,