Feature - Add Loading Animation in Deployment Flow

src/components/DeploymentFlow/DeploymentFlow.component.jsx

@@ -3,8 +3,8 @@ import lodash from 'lodash';
 import PropTypes from 'prop-types';
 import ReactFlow, { Background, Handle } from 'react-flow-renderer';
 
-import LoadingBox from 'components/LoadingBox';
 import { LogsButton } from 'components/Buttons';
+import { OperatorsEmptyPlaceholder } from 'components/EmptyPlaceholders';
 import Vectors, {
   nodeTypes,
   edgeTypes,
@@ -117,9 +117,15 @@ const DeploymentFlow = ({
   ]);
 
   return loading ? (
-    <LoadingBox siderColor='#FFF2E8' />
+    <div className='deployment-flow'>
+      <OperatorsEmptyPlaceholder
+        className='deployment-flow-empty-operators'
+        placeholderWhenLoading='Aguarde...'
+        loading
+      />
+    </div>
   ) : (
-    <div className='deployment-flow' style={{ height: '100%' }}>
+    <div className='deployment-flow'>
       <ReactFlow
         deleteKeyCode={46}
         edgeTypes={edgeTypes}
@@ -140,6 +146,13 @@ const DeploymentFlow = ({
           style={{ backgroundColor: 'white' }}
         />
 
+        {!operators?.length && (
+          <OperatorsEmptyPlaceholder
+            className='deployment-flow-empty-operators'
+            placeholder='Crie um fluxo de pré-implantação para visualizar aqui'
+          />
+        )}
+
         <LogsButton
           className='deployment-flow-logs-button'
           errorCount={numberOfLogs}

src/components/DeploymentFlow/DeploymentFlow.style.less

@@ -39,11 +39,19 @@
 .deployment-flow {
   height: 100%;
   position: relative;
+  background: white;
 
   .deployment-flow-logs-button {
     position: absolute;
     bottom: 16px;
     right: 16px;
     z-index: 10;
   }
+
+  .deployment-flow-empty-operators {
+    position: absolute;
+    top: 25%;
+    left: 25%;
+    z-index: 10;
+  }
 }

src/components/EmptyPlaceholders/OperatorsEmptyPlaceholder/OperatorsEmptyPlaceholder.component.jsx

@@ -5,19 +5,24 @@ import { OperatorsEmpty } from 'assets';
 
 import './styles.less';
 
-const OperatorsEmptyPlaceholder = ({ className, loading }) => {
+const OperatorsEmptyPlaceholder = ({
+  className,
+  loading,
+  placeholder,
+  placeholderWhenLoading,
+}) => {
   const animationClass = loading ? 'image-animated' : '';
-  const placeholderText = loading
-    ? 'Aguarde...'
-    : 'Para criar um fluxo, arraste e solte as tarefas aqui';
+  const placeholderText = loading ? placeholderWhenLoading : placeholder;
 
   return (
     <div className={`OperatorsEmptyContainer ${className}`}>
-      <h3>{placeholderText}</h3>
+      {!!placeholderText && <h3>{placeholderText}</h3>}
+
       <img
         className={animationClass}
+        draggable={false}
         src={OperatorsEmpty}
-        alt='empty operators diagram'
+        alt='Operators Placeholder'
       />
     </div>
   );
@@ -26,11 +31,15 @@ const OperatorsEmptyPlaceholder = ({ className, loading }) => {
 OperatorsEmptyPlaceholder.propTypes = {
   className: PropTypes.string,
   loading: PropTypes.bool,
+  placeholder: PropTypes.string,
+  placeholderWhenLoading: PropTypes.string,
 };
 
 OperatorsEmptyPlaceholder.defaultProps = {
   className: '',
   loading: false,
+  placeholder: '',
+  placeholderWhenLoading: '',
 };
 
 export default OperatorsEmptyPlaceholder;

src/components/EmptyPlaceholders/OperatorsEmptyPlaceholder/styles.less

@@ -1,4 +1,6 @@
 .OperatorsEmptyContainer {
+  user-select: none;
+
   h3 {
     opacity: 0.5;
   }

src/components/index.js

@@ -17,7 +17,6 @@ export { default as ExperimentEmpty } from './ExperimentEmpty';
 export { default as ExternalDatasetDrawer } from './ExternalDatasetDrawer';
 export { default as ImageLightbox } from './ImageLightbox';
 export { default as InfoRow } from './InfoRow';
-export { default as LoadingBox } from './LoadingBox';
 export { default as LogListItem } from './LogListItem';
 export { default as LogsDrawer } from './LogsDrawer';
 export { default as LogsModal } from './LogsModal';

src/pages/Experiments/Experiment/ExperimentFlow/index.js

@@ -171,8 +171,10 @@ const ExperimentFlow = ({
 
         {emptyOperators && (
           <OperatorsEmptyPlaceholder
-            loading={flowLoading}
             className='experiment-flow-empty-operators'
+            loading={flowLoading}
+            placeholderWhenLoading='Aguarde...'
+            placeholder='Para criar um fluxo, arraste e solte as tarefas aqui'
           />
         )}
 

src/pages/Experiments/Experiment/ExperimentFlow/style.less

@@ -46,6 +46,7 @@
     right: 16px;
     z-index: 10;
   }
+
   .experiment-flow-empty-operators {
     position: absolute;
     top: 25%;