feat(blocks): loading to render inputs but disable.

2025-04-06 15:30:30 +08:00 · 2022-04-12 10:19:21 +02:00 · 2022-04-12 10:19:21 +02:00 · 1662f36684
commit 1662f36684
parent 2ebaf5092e
25 changed files with 95 additions and 156 deletions
--- a/packages/plugins/blocks/blocks-antd/src/blocks/AutoComplete/AutoComplete.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/AutoComplete/AutoComplete.js
@ -28,6 +28,7 @@ const AutoCompleteInput = ({
  blockId,
  components,
  events,
+  loading,
  methods,
  properties,
  required,
@ -52,7 +53,7 @@ const AutoCompleteInput = ({
            bordered={properties.bordered}
            className={methods.makeCssClass(properties.inputStyle)}
            defaultOpen={properties.defaultOpen}
-            disabled={properties.disabled}
+            disabled={properties.disabled || loading}
            placeholder={properties.placeholder || 'Type or select item'}
            allowClear={properties.allowClear !== false}
            size={properties.size}
@ -112,11 +113,7 @@ AutoCompleteInput.defaultProps = blockDefaultProps;
 AutoCompleteInput.meta = {
  valueType: 'string',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/AutoComplete/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/Button/Button.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/Button/Button.js
@ -23,8 +23,9 @@ import color from '../../color.js';

 const ButtonBlock = ({
  blockId,
-  events,
  components: { Icon },
+  events,
+  loading,
  methods,
  onClick,
  properties,
@ -49,7 +50,7 @@ const ButtonBlock = ({
        },
        properties.style,
      ])}
-      disabled={properties.disabled || get(events, `${onClickActionName}.loading`)}
+      disabled={properties.disabled || get(events, `${onClickActionName}.loading`) || loading}
      ghost={properties.ghost}
      danger={properties.danger}
      href={properties.href}
@ -77,11 +78,7 @@ const ButtonBlock = ({
 ButtonBlock.defaultProps = blockDefaultProps;
 ButtonBlock.meta = {
  category: 'display',
-  skeleton: [
-    {
-      type: 'SkeletonButton',
-    },
-  ],
+  skeleton: false,
  icons: [],
  styles: ['blocks/Button/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/ButtonSelector/ButtonSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/ButtonSelector/ButtonSelector.js
@ -27,6 +27,7 @@ const ButtonSelector = ({
  blockId,
  components,
  events,
+  loading,
  properties,
  required,
  validation,
@ -56,7 +57,7 @@ const ButtonSelector = ({
              },
              properties.inputStyle,
            ])}
-            disabled={properties.disabled}
+            disabled={properties.disabled || loading}
            size={properties.size}
            buttonStyle={properties.buttonStyle ? properties.buttonStyle : 'solid'}
            onChange={(event) => {
@ -99,11 +100,7 @@ ButtonSelector.defaultProps = blockDefaultProps;
 ButtonSelector.meta = {
  valueType: 'any',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/ButtonSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/CheckboxSelector/CheckboxSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/CheckboxSelector/CheckboxSelector.js
@ -27,6 +27,7 @@ const CheckboxSelector = ({
  blockId,
  components,
  events,
+  loading,
  properties,
  required,
  validation,
@ -55,7 +56,7 @@ const CheckboxSelector = ({
              },
              properties.inputStyle,
            ])}
-            disabled={properties.disabled}
+            disabled={properties.disabled || loading}
            onChange={(newVal) => {
              const val = [];
              newVal.forEach((nv) => {
@ -106,11 +107,7 @@ CheckboxSelector.defaultProps = blockDefaultProps;
 CheckboxSelector.meta = {
  valueType: 'array',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/CheckboxSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/CheckboxSwitch/CheckboxSwitch.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/CheckboxSwitch/CheckboxSwitch.js
@ -24,6 +24,7 @@ const CheckboxSwitch = ({
  blockId,
  components,
  events,
+  loading,
  properties,
  required,
  validation,
@ -43,7 +44,7 @@ const CheckboxSwitch = ({
          <Checkbox
            id={`${blockId}_input`}
            checked={value}
-            disabled={properties.disabled}
+            disabled={properties.disabled || loading}
            className={methods.makeCssClass([
              properties.color && {
                '& > span.ant-checkbox-checked:not(.ant-checkbox-disabled) > span': {
@ -73,11 +74,7 @@ CheckboxSwitch.defaultProps = blockDefaultProps;
 CheckboxSwitch.meta = {
  valueType: 'boolean',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/CheckboxSwitch/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/DateRangeSelector/DateRangeSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/DateRangeSelector/DateRangeSelector.js
@ -35,6 +35,7 @@ const DateRangeSelector = ({
  blockId,
  components: { Icon },
  events,
+  loading,
  methods,
  properties,
  required,
@ -59,7 +60,7 @@ const DateRangeSelector = ({
              autoFocus={properties.autoFocus}
              bordered={properties.bordered}
              className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              disabledDate={disabledDate(properties.disabledDates)}
              format={properties.format || 'YYYY-MM-DD'}
              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
@ -103,11 +104,7 @@ DateRangeSelector.defaultProps = blockDefaultProps;
 DateRangeSelector.meta = {
  valueType: 'array',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons, 'AiOutlineCalendar'],
  styles: ['blocks/DateRangeSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/DateSelector/DateSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/DateSelector/DateSelector.js
@ -25,8 +25,9 @@ import disabledDate from '../../disabledDate.js';

 const DateSelector = ({
  blockId,
-  events,
  components: { Icon },
+  events,
+  loading,
  methods,
  properties,
  required,
@ -51,7 +52,7 @@ const DateSelector = ({
              autoFocus={properties.autoFocus}
              bordered={properties.bordered}
              className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              format={properties.format || 'YYYY-MM-DD'}
              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
              placeholder={properties.placeholder || 'Select Date'}
@ -88,11 +89,7 @@ DateSelector.defaultProps = blockDefaultProps;
 DateSelector.meta = {
  valueType: 'date',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons, 'AiOutlineCalendar'],
  styles: ['blocks/DateSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/DateTimeSelector/DateTimeSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/DateTimeSelector/DateTimeSelector.js
@ -25,8 +25,9 @@ import disabledDate from '../../disabledDate.js';

 const DateTimeSelector = ({
  blockId,
-  events,
  components: { Icon },
+  events,
+  loading,
  methods,
  properties,
  required,
@ -58,7 +59,7 @@ const DateTimeSelector = ({
              autoFocus={properties.autoFocus}
              bordered={properties.bordered}
              className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              disabledDate={disabledDate(properties.disabledDates)}
              format={properties.format || 'YYYY-MM-DD HH:mm'}
              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
@ -111,11 +112,7 @@ DateTimeSelector.defaultProps = blockDefaultProps;
 DateTimeSelector.meta = {
  valueType: 'date',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons, 'AiOutlineCalendar'],
  styles: ['blocks/DateTimeSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/Label/Label.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/Label/Label.js
@ -105,11 +105,7 @@ const Label = ({
 Label.defaultProps = blockDefaultProps;
 Label.meta = {
  category: 'container',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: ['AiFillCloseCircle', 'AiFillCheckCircle', 'AiOutlineLoading', 'AiFillExclamationCircle'],
  styles: ['blocks/Label/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/MonthSelector/MonthSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/MonthSelector/MonthSelector.js
@ -29,6 +29,7 @@ const MonthSelector = ({
  blockId,
  components: { Icon },
  events,
+  loading,
  methods,
  properties,
  required,
@ -53,7 +54,7 @@ const MonthSelector = ({
              autoFocus={properties.autoFocus}
              bordered={properties.bordered}
              className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              disabledDate={disabledDate(properties.disabledDates)}
              format={properties.format || 'YYYY-MM'}
              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
@ -92,11 +93,7 @@ MonthSelector.defaultProps = blockDefaultProps;
 MonthSelector.meta = {
  valueType: 'date',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons, 'AiOutlineCalendar'],
  styles: ['blocks/MonthSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/MultipleSelector/MultipleSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/MultipleSelector/MultipleSelector.js
@ -29,6 +29,7 @@ const MultipleSelector = ({
  blockId,
  components: { Icon },
  events,
+  loading,
  methods,
  properties,
  required,
@ -54,7 +55,7 @@ const MultipleSelector = ({
              autoFocus={properties.autoFocus}
              bordered={properties.bordered}
              className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
              mode="multiple"
              notFoundContent={fetchState ? 'Loading' : 'Not found'}
@ -151,11 +152,7 @@ MultipleSelector.defaultProps = blockDefaultProps;
 MultipleSelector.meta = {
  valueType: 'array',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/MultipleSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/NumberInput/NumberInput.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/NumberInput/NumberInput.js
@ -24,6 +24,7 @@ const NumberInput = ({
  blockId,
  events,
  components,
+  loading,
  methods,
  properties,
  required,
@ -48,7 +49,7 @@ const NumberInput = ({
            className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
            controls={properties.controls}
            decimalSeparator={properties.decimalSeparator}
-            disabled={properties.disabled}
+            disabled={properties.disabled || loading}
            formatter={properties.formatter}
            keyboard={properties.keyboard}
            max={properties.max}
@ -76,11 +77,7 @@ NumberInput.defaultProps = blockDefaultProps;
 NumberInput.meta = {
  valueType: 'number',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/NumberInput/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/Pagination/Pagination.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/Pagination/Pagination.js
@ -39,7 +39,7 @@ const createChangeHandler =
    });
  };

-const PaginationBlock = ({ blockId, methods, properties, value }) => {
+const PaginationBlock = ({ blockId, loading, methods, properties, value }) => {
  const showTotal = type.isFunction(properties.showTotal)
    ? properties.showTotal
    : (total, range) => {
@ -54,7 +54,7 @@ const PaginationBlock = ({ blockId, methods, properties, value }) => {
  return (
    <Pagination
      id={blockId}
-      disabled={properties.disabled}
+      disabled={properties.disabled || loading}
      hideOnSinglePage={properties.hideOnSinglePage}
      onChange={createChangeHandler({ eventName: 'onChange', methods })}
      onShowSizeChange={createChangeHandler({ eventName: 'onSizeChange', methods })}
@ -84,14 +84,7 @@ PaginationBlock.meta = {
    skip: 0,
  },
  category: 'input',
-  skeleton: [
-    {
-      type: 'Skeleton',
-      properties: {
-        height: 33,
-      },
-    },
-  ],
+  skeleton: false,
  icons: [],
  styles: ['blocks/Pagination/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/ParagraphInput/ParagraphInput.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/ParagraphInput/ParagraphInput.js
@ -21,7 +21,15 @@ import { type } from '@lowdefy/helpers';

 const Paragraph = Typography.Paragraph;

-const ParagraphInput = ({ blockId, events, components: { Icon }, properties, methods, value }) => {
+const ParagraphInput = ({
+  blockId,
+  components: { Icon },
+  events,
+  loading,
+  methods,
+  properties,
+  value,
+}) => {
  const [editing, setEdit] = useState(false);
  const editableEvents = {
    onStart: () => {
@ -80,7 +88,7 @@ const ParagraphInput = ({ blockId, events, components: { Icon }, properties, met
          : properties.copyable
      }
      delete={properties.delete}
-      disabled={properties.disabled}
+      disabled={properties.disabled || loading}
      ellipsis={
        type.isObject(properties.ellipsis)
          ? {
@ -135,11 +143,7 @@ ParagraphInput.defaultProps = blockDefaultProps;
 ParagraphInput.meta = {
  valueType: 'string',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonParagraph',
-    },
-  ],
+  skeleton: false,
  icons: [],
  styles: ['blocks/ParagraphInput/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/PasswordInput/PasswordInput.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/PasswordInput/PasswordInput.js
@ -25,6 +25,7 @@ const PasswordInput = ({
  blockId,
  components,
  events,
+  loading,
  methods,
  properties,
  required,
@ -48,7 +49,7 @@ const PasswordInput = ({
              bordered={properties.bordered}
              className={methods.makeCssClass(properties.inputStyle)}
              autoFocus={properties.autoFocus}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              onChange={(event) => {
                methods.setValue(event.target.value);
                methods.triggerEvent({ name: 'onChange' });
@ -77,11 +78,7 @@ PasswordInput.defaultProps = blockDefaultProps;
 PasswordInput.meta = {
  valueType: 'string',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/PasswordInput/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/RadioSelector/RadioSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/RadioSelector/RadioSelector.js
@ -29,6 +29,7 @@ const RadioSelector = ({
  blockId,
  components,
  events,
+  loading,
  properties,
  required,
  validation,
@ -59,7 +60,7 @@ const RadioSelector = ({
              },
              properties.inputStyle,
            ])}
-            disabled={properties.disabled}
+            disabled={properties.disabled || loading}
            onChange={(event) => {
              methods.setValue(
                type.isPrimitive(uniqueValueOptions[event.target.value])
@ -106,11 +107,7 @@ RadioSelector.defaultProps = blockDefaultProps;
 RadioSelector.meta = {
  valueType: 'any',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/RadioSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/RatingSlider/RatingSlider.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/RatingSlider/RatingSlider.js
@ -73,6 +73,7 @@ const RatingSlider = ({
  blockId,
  components: { Icon, Link },
  events,
+  loading,
  methods,
  properties,
  required,
@ -124,6 +125,7 @@ const RatingSlider = ({
                    label: { disabled: true },
                    options: [{ value: true, label: properties.notApplicableLabel || 'N/A' }],
                    color: properties.color,
+                    disabled: properties.disabled || loading,
                  },
                  properties.CheckboxInput,
                  { style: styles.checkbox },
@ -179,7 +181,11 @@ const RatingSlider = ({
                methods.makeCssClass(properties.inputStyle)
              )}
              autoFocus={properties.autoFocus}
-              disabled={properties.disabled || (check === true && !properties.disableNotApplicable)}
+              disabled={
+                properties.disabled ||
+                (check === true && !properties.disableNotApplicable) ||
+                loading
+              }
              dots={get(properties, 'showDots', { default: true })}
              tooltipVisible={
                value === null || properties.tooltipVisible === 'never'
--- a/packages/plugins/blocks/blocks-antd/src/blocks/Selector/Selector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/Selector/Selector.js
@ -29,6 +29,7 @@ const Selector = ({
  blockId,
  components: { Icon, Link },
  events,
+  loading,
  methods,
  properties,
  required,
@ -56,7 +57,7 @@ const Selector = ({
              mode="single"
              autoFocus={properties.autoFocus}
              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              placeholder={get(properties, 'placeholder', { default: 'Select item' })}
              suffixIcon={
                properties.suffixIcon && (
@ -140,11 +141,7 @@ Selector.defaultProps = blockDefaultProps;
 Selector.meta = {
  valueType: 'any',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/Selector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/Switch/Switch.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/Switch/Switch.js
@ -25,6 +25,7 @@ const SwitchBlock = ({
  blockId,
  components: { Icon, Link },
  events,
+  loading,
  methods,
  properties,
  required,
@ -58,7 +59,7 @@ const SwitchBlock = ({
              },
              properties.inputStyle,
            ])}
-            disabled={properties.disabled}
+            disabled={properties.disabled || loading}
            id={`${blockId}_input`}
            size={properties.size}
            checkedChildren={
@ -104,11 +105,7 @@ SwitchBlock.defaultProps = blockDefaultProps;
 SwitchBlock.meta = {
  valueType: 'boolean',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons, 'AiOutlineCheck', 'AiOutlineClose'],
  styles: ['blocks/Switch/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/TextArea/TextArea.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/TextArea/TextArea.js
@ -28,6 +28,7 @@ const TextAreaBlock = ({
  blockId,
  components,
  events,
+  loading,
  properties,
  required,
  validation,
@ -52,7 +53,7 @@ const TextAreaBlock = ({
              autoFocus={properties.autoFocus}
              bordered={properties.bordered}
              className={methods.makeCssClass(properties.inputStyle)}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              maxLength={properties.maxLength}
              placeholder={properties.placeholder}
              showCount={properties.showCount}
@ -89,11 +90,7 @@ TextAreaBlock.defaultProps = blockDefaultProps;
 TextAreaBlock.meta = {
  valueType: 'string',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/TextArea/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/TextInput/TextInput.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/TextInput/TextInput.js
@ -25,6 +25,7 @@ const TextInput = ({
  blockId,
  components: { Icon, Link },
  events,
+  loading,
  methods,
  properties,
  required,
@ -49,7 +50,7 @@ const TextInput = ({
              autoFocus={properties.autoFocus}
              bordered={properties.bordered}
              className={methods.makeCssClass(properties.inputStyle)}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              maxLength={properties.maxLength}
              placeholder={properties.placeholder}
              size={properties.size}
@ -98,11 +99,7 @@ TextInput.defaultProps = blockDefaultProps;
 TextInput.meta = {
  valueType: 'string',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/TextInput/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/TitleInput/TitleInput.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/TitleInput/TitleInput.js
@ -21,7 +21,15 @@ import { type } from '@lowdefy/helpers';

 const Title = Typography.Title;

-const TitleInput = ({ blockId, components: { Icon }, events, methods, properties, value }) => {
+const TitleInput = ({
+  blockId,
+  components: { Icon },
+  events,
+  loading,
+  methods,
+  properties,
+  value,
+}) => {
  const [editing, setEdit] = useState(false);
  const editableEvents = {
    onStart: () => {
@ -88,7 +96,7 @@ const TitleInput = ({ blockId, components: { Icon }, events, methods, properties
          : properties.copyable
      }
      delete={properties.delete}
-      disabled={properties.disabled}
+      disabled={properties.disabled || loading}
      ellipsis={
        type.isObject(properties.ellipsis)
          ? {
@ -131,14 +139,7 @@ TitleInput.defaultProps = blockDefaultProps;
 TitleInput.meta = {
  valueType: 'string',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonParagraph',
-      properties: {
-        lines: 1,
-      },
-    },
-  ],
+  skeleton: false,
  icons: [],
  styles: ['blocks/TitleInput/style.less'],
 };
--- a/packages/plugins/blocks/blocks-antd/src/blocks/WeekSelector/WeekSelector.js
+++ b/packages/plugins/blocks/blocks-antd/src/blocks/WeekSelector/WeekSelector.js
@ -29,6 +29,7 @@ const WeekSelector = ({
  blockId,
  components: { Icon, Link },
  events,
+  loading,
  methods,
  properties,
  required,
@ -53,7 +54,7 @@ const WeekSelector = ({
              autoFocus={properties.autoFocus}
              bordered={properties.bordered}
              className={methods.makeCssClass([{ width: '100%' }, properties.inputStyle])}
-              disabled={properties.disabled}
+              disabled={properties.disabled || loading}
              disabledDate={disabledDate(properties.disabledDates)}
              format={properties.format || 'YYYY-wo'}
              getPopupContainer={() => document.getElementById(`${blockId}_popup`)}
@ -89,11 +90,7 @@ WeekSelector.defaultProps = blockDefaultProps;
 WeekSelector.meta = {
  valueType: 'date',
  category: 'input',
-  skeleton: [
-    {
-      type: 'SkeletonInput',
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons, 'AiOutlineCalendar'],
  styles: ['blocks/WeekSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-color-selectors/src/blocks/ColorSelector/ColorSelector.js
+++ b/packages/plugins/blocks/blocks-color-selectors/src/blocks/ColorSelector/ColorSelector.js
@ -24,6 +24,7 @@ const ColorSelector = ({
  blockId,
  components,
  events,
+  loading,
  methods,
  properties,
  required,
@ -55,7 +56,7 @@ const ColorSelector = ({
            undefinedColor={properties.undefinedColor}
            value={value}
            hideInput={properties.hideInput}
-            disabled={properties.disabled}
+            disabled={properties.disabled || loading}
            methods={methods}
          />
        ),
@ -68,14 +69,7 @@ ColorSelector.defaultProps = blockDefaultProps;
 ColorSelector.meta = {
  valueType: 'string',
  category: 'input',
-  skeleton: [
-    {
-      type: 'Skeleton',
-      properties: {
-        height: 216,
-      },
-    },
-  ],
+  skeleton: false,
  icons: [...Label.meta.icons],
  styles: ['blocks/ColorSelector/style.less'],
 };
--- a/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.js
+++ b/packages/plugins/blocks/blocks-loaders/src/blocks/ProgressBar/ProgressBar.js
@ -14,14 +14,13 @@
  limitations under the License.
 */

-import React, { forwardRef } from 'react';
+import React from 'react';
 import { blockDefaultProps } from '@lowdefy/block-utils';

 const ProgressBar = ({ blockId, methods, style, properties, content }) => {
  const {
    progress = 30,
    height = 3,
-    // color = 'red', // TODO: get primary from theme ??
    transitionTime = 1000,
    // loaderSpeed = 500,
    // waitingTime = 1000,
@ -59,4 +58,4 @@ ProgressBar.meta = {
  styles: ['blocks/ProgressBar/style.less'],
 };

-export default forwardRef(ProgressBar);
+export default ProgressBar;