gantt-task-react-powern 0.6.8 → 0.6.10

package/dist/index.css

@@ -340,6 +340,25 @@
   font-weight: bold;
   cursor: pointer;
 }
+._3HJjy {
+  width: 24px;
+  height: 24px;
+  border: 4px solid rgba(0, 0, 0, 0.15);
+  border-top: 4px solid #cc0404;
+  border-radius: 50%;
+  animation: _1W2rn 1s linear infinite;
+  display: inline-block;
+  box-sizing: border-box;
+}
+@keyframes _1W2rn {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 ._2k9Ys {
   overflow: auto;
   max-width: 100%;

package/dist/index.js

@@ -2852,7 +2852,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
   })));
 };
 
-var styles$9 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf","alertContainer":"_2AxB2","success":"_1a-EU","warning":"_1TP0x","error":"_2TeAI","alertDismissCheckbox":"_3cBUj","alertCloseButton":"_5jQM6"};
+var styles$9 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf","alertContainer":"_2AxB2","success":"_1a-EU","warning":"_1TP0x","error":"_2TeAI","alertDismissCheckbox":"_3cBUj","alertCloseButton":"_5jQM6","spinner":"_3HJjy","spin":"_1W2rn"};
 
 var TaskGantt = function TaskGantt(_ref) {
   var gridProps = _ref.gridProps,
@@ -3131,6 +3131,10 @@ var Gantt = function Gantt(_ref) {
       lastTouchY = _useState14[0],
       setLastTouchY = _useState14[1];
 
+  var _useState15 = React.useState(false),
+      isProcessing = _useState15[0],
+      setIsProcessing = _useState15[1];
+
   var buffer = rowHeight * 10;
   var visibleStartY = scrollY - buffer;
   var visibleEndY = scrollY + ganttHeight + buffer;
@@ -3147,6 +3151,7 @@ var Gantt = function Gantt(_ref) {
       clearTimeout(debounceRef.current);
     }
 
+    setIsProcessing(true);
     debounceRef.current = setTimeout(function () {
       var filteredTasks;
 
@@ -3195,8 +3200,9 @@ var Gantt = function Gantt(_ref) {
       }
 
       setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
+      setIsProcessing(false);
     }, delayToRender);
-  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, scrollX, onExpanderClick]);
+  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, onExpanderClick]);
   React.useEffect(function () {
     return function () {
       clearTimeout(debounceRef.current);
@@ -3275,6 +3281,8 @@ var Gantt = function Gantt(_ref) {
   React.useEffect(function () {
     var _wrapperRef$current, _wrapperRef$current2, _wrapperRef$current3, _wrapperRef$current4;
 
+    if (isProcessing) return;
+
     var handleWheel = function handleWheel(event) {
       if (event.shiftKey || event.deltaX) {
         var scrollMove = event.deltaX ? event.deltaX : event.deltaY;
@@ -3367,7 +3375,7 @@ var Gantt = function Gantt(_ref) {
       (_wrapperRef$current7 = wrapperRef.current) === null || _wrapperRef$current7 === void 0 ? void 0 : _wrapperRef$current7.removeEventListener("touchend", handleLogTouch);
       (_wrapperRef$current8 = wrapperRef.current) === null || _wrapperRef$current8 === void 0 ? void 0 : _wrapperRef$current8.removeEventListener("touchend", handleLogTouch);
     };
-  }, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight]);
+  }, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight, isProcessing]);
 
   var handleScrollY = function handleScrollY(event) {
     if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
@@ -3539,6 +3547,36 @@ var Gantt = function Gantt(_ref) {
     taskLabelRenderer: taskLabelRenderer,
     onMultiSelect: onMultiSelect
   };
+
+  if (isProcessing) {
+    return React__default.createElement("div", {
+      className: styles$9.wrapper,
+      style: {
+        position: "relative",
+        minHeight: ganttHeight || 200
+      }
+    }, React__default.createElement("div", {
+      style: {
+        position: "absolute",
+        inset: 0,
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "16px"
+      }
+    }, React__default.createElement("span", {
+      style: {
+        fontSize: "24px",
+        color: "#cc0404",
+        fontFamily: "Arial, sans-serif"
+      }
+    }, "Loading..."), React__default.createElement("div", {
+      className: styles$9.spinner
+    })));
+  }
+
   return React__default.createElement("div", null, React__default.createElement("div", {
     className: styles$9.wrapper,
     onKeyDown: handleKeyDown,