Merge branch 'fix/widget-loading' into 'release'

Fix components for widget update

See merge request theappsmith/internal-tools-client!275

app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx

@@ -25,7 +25,13 @@ class DatePickerComponent extends React.Component<DatePickerComponentProps> {
     return (
       <StyledControlGroup fill>
         {this.props.label && (
-          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+          <Label
+            className={
+              this.props.isLoading
+                ? Classes.SKELETON
+                : Classes.TEXT_OVERFLOW_ELLIPSIS
+            }
+          >
             {this.props.label}
           </Label>
         )}

app/client/src/components/designSystems/blueprint/DropdownComponent.tsx

@@ -74,7 +74,13 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
       <DropdownContainer>
         <StyledControlGroup fill>
           {this.props.label && (
-            <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+            <Label
+              className={
+                this.props.isLoading
+                  ? Classes.SKELETON
+                  : Classes.TEXT_OVERFLOW_ELLIPSIS
+              }
+            >
               {this.props.label}
             </Label>
           )}

app/client/src/components/designSystems/blueprint/InputComponent.tsx

@@ -105,10 +105,14 @@ class InputComponent extends React.Component<
     return (
       <InputComponentWrapper fill>
         {this.props.label && (
-          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+          <Label
-            <span className={this.props.isLoading ? "bp3-skeleton" : ""}>
+            className={
-              {this.props.label}
+              this.props.isLoading
-            </span>
+                ? Classes.SKELETON
+                : Classes.TEXT_OVERFLOW_ELLIPSIS
+            }
+          >
+            {this.props.label}
           </Label>
         )}
 

app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx

@@ -31,7 +31,13 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
     return (
       <StyledControlGroup fill>
         {this.props.label && (
-          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+          <Label
+            className={
+              this.props.isLoading
+                ? Classes.SKELETON
+                : Classes.TEXT_OVERFLOW_ELLIPSIS
+            }
+          >
             {this.props.label}
           </Label>
         )}

app/client/src/components/designSystems/syncfusion/TableComponent.tsx

@@ -20,6 +20,7 @@ import React, { useRef, MutableRefObject, useEffect, memo } from "react";
 import styled from "constants/DefaultTheme";
 import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
 import { ActionPayload } from "constants/ActionConstants";
+import { Classes } from "@blueprintjs/core";
 
 export interface TableComponentProps {
   data: object[];
@@ -163,38 +164,48 @@ const TableComponent = memo(
     }
 
     return (
-      <StyledGridComponent
+      <div className={props.isLoading ? Classes.SKELETON : ""}>
-        selectionSettings={settings}
+        <StyledGridComponent
-        dataSource={props.data}
+          selectionSettings={settings}
-        rowSelected={rowSelected}
+          dataSource={props.data}
-        ref={grid}
+          rowSelected={rowSelected}
-        width={"100%"}
+          ref={grid}
-        height={"100%"}
+          width={"100%"}
-        allowPaging={true}
+          height={"100%"}
-        allowReordering={true}
+          allowPaging={true}
-        allowResizing={true}
+          allowReordering={true}
-        showColumnMenu={true}
+          allowResizing={true}
-        columnDragStart={columnDragStart}
+          showColumnMenu={true}
-        columnDrop={columnDrop}
+          columnDragStart={columnDragStart}
-        commandClick={onCommandClick}
+          columnDrop={columnDrop}
-        columnMenuOpen={columnMenuOpen}
+          commandClick={onCommandClick}
-      >
+          columnMenuOpen={columnMenuOpen}
-        <Inject services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]} />
+          // queryCellInfo={customizeCell}
-        <ColumnsDirective>
+        >
-          {props.columns.map(col => {
+          <Inject
-            return (
+            services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]}
-              <ColumnDirective key={col.field} field={col.field} width={200} />
+          />
-            );
+          <ColumnsDirective>
-          })}
+            {props.columns.map(col => {
-          {commands.length > 0 && (
+              return (
-            <ColumnDirective headerText="Actions" commands={commands} />
+                <ColumnDirective
-          )}
+                  key={col.field}
-        </ColumnsDirective>
+                  field={col.field}
-      </StyledGridComponent>
+                  width={200}
+                />
+              );
+            })}
+            {commands.length > 0 && (
+              <ColumnDirective headerText="Actions" commands={commands} />
+            )}
+          </ColumnsDirective>
+        </StyledGridComponent>
+      </div>
     );
   },
   (prevProps, nextProps) => {
     const propsNotEqual =
+      nextProps.isLoading !== prevProps.isLoading ||
       JSON.stringify(nextProps.data) !== JSON.stringify(prevProps.data) ||
       nextProps.height !== prevProps.height ||
       JSON.stringify(nextProps.columnActions) !==

app/client/src/sagas/ActionSagas.ts

@@ -11,6 +11,7 @@ import {
   put,
   takeEvery,
   takeLatest,
+  take,
 } from "redux-saga/effects";
 import {
   ActionPayload,
@@ -382,7 +383,6 @@ export function* runApiActionSaga(action: ReduxAction<string>) {
 
 function* executePageLoadActionsSaga(action: ReduxAction<PageAction[][]>) {
   const pageActions = action.payload;
-  const apiResponses = yield select(getActionResponses);
   const actionPayloads: ActionPayload[][] = pageActions.map(actionSet =>
     actionSet.map(action => ({
       actionId: action.id,
@@ -392,10 +392,14 @@ function* executePageLoadActionsSaga(action: ReduxAction<PageAction[][]>) {
     })),
   );
   for (const actionSet of actionPayloads) {
+    const apiResponses = yield select(getActionResponses);
     const filteredSet = actionSet.filter(
-      action => !(action.actionId in apiResponses),
+      action => !apiResponses[action.actionId],
     );
-    yield* executeReduxActionSaga(executeAction(filteredSet));
+    yield put(executeAction(filteredSet));
+    for (const {} of filteredSet) {
+      yield take(ReduxActionTypes.EXECUTE_ACTION_SUCCESS);
+    }
   }
 }