test: spice up cell (#216)

qlik-oss · Dec 5, 2019 · 4e0cbb8 · 4e0cbb8
1 parent f5e6318
commit 4e0cbb8
Show file tree

Hide file tree

Showing 6 changed files with 508 additions and 9 deletions.
diff --git a/apis/nucleus/src/components/Cell.jsx b/apis/nucleus/src/components/Cell.jsx
@@ -6,6 +6,7 @@ import { useTheme } from '@nebula.js/ui/theme';
 
 import CError from './Error';
 import LongRunningQuery from './LongRunningQuery';
+import Loading from './Loading';
 import Header from './Header';
 import Footer from './Footer';
 import Supernova from './Supernova';
@@ -24,7 +25,7 @@ const initialState = {
 };
 
 const contentReducer = (state, action) => {
-  // console.log(action.type);
+  // console.log('content reducer', action.type);
   switch (action.type) {
     case 'LOADING': {
       return {
@@ -71,16 +72,16 @@ const contentReducer = (state, action) => {
   }
 };
 
-const Loading = ({ delay = 750 }) => {
+const LoadingSn = ({ delay = 750 }) => {
   const [showLoading, setShowLoading] = useState(false);
 
   useEffect(() => {
     const handle = setTimeout(() => setShowLoading(true), delay);
 
     return () => clearTimeout(handle);
-  });
+  }, []);
 
-  return showLoading && <div>loading...</div>;
+  return showLoading && <Loading />;
 };
 
 const handleModal = ({ sn, layout, model }) => {
@@ -188,11 +189,12 @@ const Cell = forwardRef(({ nebulaContext, model, initialSnContext, initialSnOpti
       }
       return undefined;
     };
-
+    // console.log('layout', layout);
     if (!layout) {
       dispatch({ type: 'LOADING' });
       return undefined;
     }
+
     if (state.sn) {
       validate(state.sn);
       return undefined;
@@ -249,10 +251,10 @@ const Cell = forwardRef(({ nebulaContext, model, initialSnContext, initialSnOpti
     }),
     [state.sn, contentRect, layout]
   );
-
+  // console.log('content', state);
   let Content = null;
   if (state.loading) {
-    Content = <Loading />;
+    Content = <LoadingSn />;
   } else if (state.error) {
     Content = <CError {...state.error} />;
   } else if (state.loaded) {

diff --git a/apis/nucleus/src/components/Header.jsx b/apis/nucleus/src/components/Header.jsx
@@ -25,7 +25,9 @@ const Header = ({ layout, sn }) => {
         </Grid>
       </Grid>
       <Grid item style={{ whiteSpace: 'nowrap', minHeight: '32px' }}>
-        {showInSelectionActions && <STToolbar inline api={sn.component.selections} items={sn.selectionToolbar.items} />}
+        {showInSelectionActions && (
+          <STToolbar inline api={sn.component.selections} xItems={sn.selectionToolbar.items} />
+        )}
       </Grid>
     </Grid>
   );

diff --git a/apis/nucleus/src/components/Loading.jsx b/apis/nucleus/src/components/Loading.jsx
@@ -0,0 +1,26 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { Grid } from '@material-ui/core';
+
+import Progress from './Progress';
+
+export default function Loading() {
+  return (
+    <Grid
+      container
+      direction="column"
+      alignItems="center"
+      justify="center"
+      style={{
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0,
+      }}
+      spacing={2}
+    >
+      <Progress size="large" />
+    </Grid>
+  );
+}