Add loading state check to computation of cell contents.

Shammamah Hossain · Shammamah Hossain · commit fc77aecfc97b · 2019-09-06T13:39:46.000-04:00
diff --git a/src/dash-table/components/CellFactory.tsx b/src/dash-table/components/CellFactory.tsx
@@ -51,7 +51,8 @@ export default class CellFactory {
             style_data,
             style_data_conditional,
             virtualized,
-            visibleColumns
+            visibleColumns,
+            loading_state
         } = this.props;
 
         const relevantStyles = this.relevantStyles(
@@ -118,7 +119,8 @@ export default class CellFactory {
             virtualized.data,
             virtualized.offset,
             !!is_focused,
-            dropdowns
+            dropdowns,
+            loading_state
         );
 
         const cellContents = this.cellContents.get(
@@ -128,7 +130,8 @@ export default class CellFactory {
             virtualized.data,
             virtualized.offset,
             !!is_focused,
-            dropdowns
+            dropdowns,
+            loading_state
         );
 
         const ops = this.getDataOpCells(
diff --git a/src/dash-table/derived/cell/contents.tsx b/src/dash-table/derived/cell/contents.tsx
@@ -11,7 +11,8 @@ import {
     IViewportOffset,
     IColumn,
     Presentation,
-    Columns
+    Columns,
+    ILoadingState
 } from 'dash-table/components/Table/props';
 import CellInput from 'dash-table/components/CellInput';
 import derivedCellEventHandlerProps, { Handler } from 'dash-table/derived/cell/eventHandlerProps';
@@ -35,15 +36,16 @@ function getCellType(
     active: boolean,
     editable: boolean,
     dropdown: IDropdownValue[] | undefined,
-    presentation: Presentation | undefined
+    presentation: Presentation | undefined,
+    is_loading: boolean
 ): CellType {
     switch (presentation) {
         case Presentation.Input:
-            return (!active || !editable) ? CellType.Label : CellType.Input;
+            return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
         case Presentation.Dropdown:
             return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
         default:
-            return (!active || !editable) ? CellType.Label : CellType.Input;
+            return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
     }
 }
 
@@ -62,7 +64,8 @@ class Contents {
         data: Data,
         _offset: IViewportOffset,
         isFocused: boolean,
-        dropdowns: (IDropdown | undefined)[][]
+        dropdowns: (IDropdown | undefined)[][],
+        loading_state: ILoadingState | undefined
     ): JSX.Element[][] => {
         const formatters = R.map(getFormatter, columns);
 
@@ -76,7 +79,8 @@ class Contents {
                     columnIndex,
                     rowIndex,
                     datum,
-                    formatters
+                    formatters,
+                    loading_state
                 ), columns), data);
     });
 
@@ -87,7 +91,8 @@ class Contents {
         data: Data,
         offset: IViewportOffset,
         isFocused: boolean,
-        dropdowns: (IDropdown | undefined)[][]
+        dropdowns: (IDropdown | undefined)[][],
+        loading_state: ILoadingState | undefined
     ): JSX.Element[][] => {
         if (!activeCell) {
             return contents;
@@ -112,20 +117,21 @@ class Contents {
             jActive,
             iActive,
             data[i],
-            formatters
+            formatters,
+            loading_state
         );
 
         return contents;
     });
 
-    private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[]) {
+    private getContent(active: boolean, isFocused: boolean, column: IColumn, dropdown: IDropdown | undefined, columnIndex: number, rowIndex: number, datum: any, formatters: ((value: any) => any)[], loading_state: ILoadingState | undefined) {
         const className = [
             ...(active ? ['input-active'] : []),
             isFocused ? 'focused' : 'unfocused',
             'dash-cell-value'
         ].join(' ');
 
-        const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation);
+        const cellType = getCellType(active, column.editable, dropdown && dropdown.options, column.presentation, loading_state && loading_state.is_loading ? true : false);
 
         switch (cellType) {
             case CellType.Dropdown:
