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.isLoading
+                ? Classes.SKELETON
+                : Classes.TEXT_OVERFLOW_ELLIPSIS
+            }
+          >
             {this.props.label}
-            </span>
           </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,6 +164,7 @@ const TableComponent = memo(
     }
 
     return (
+      <div className={props.isLoading ? Classes.SKELETON : ""}>
         <StyledGridComponent
           selectionSettings={settings}
           dataSource={props.data}
@@ -178,12 +180,19 @@ const TableComponent = memo(
           columnDrop={columnDrop}
           commandClick={onCommandClick}
           columnMenuOpen={columnMenuOpen}
+          // queryCellInfo={customizeCell}
         >
-        <Inject services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]} />
+          <Inject
+            services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]}
+          />
           <ColumnsDirective>
             {props.columns.map(col => {
               return (
-              <ColumnDirective key={col.field} field={col.field} width={200} />
+                <ColumnDirective
+                  key={col.field}
+                  field={col.field}
+                  width={200}
+                />
               );
             })}
             {commands.length > 0 && (
@@ -191,10 +200,12 @@ const TableComponent = memo(
             )}
           </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);
+    }
   }
 }