better loader response

eea · Jan 12, 2023 · d6f3c86 · d6f3c86
1 parent 48219a3
commit d6f3c86
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 14 deletions.
diff --git a/src/Tableau/View.jsx b/src/Tableau/View.jsx
@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
 import { setTableauApi } from '@eeacms/volto-tableau/actions';
 import cx from 'classnames';
-import { isMyScriptLoaded, loadTableauScript } from '../helpers';
+import { loadTableauScript } from '../helpers';
 
 const Tableau = (props) => {
   const ref = React.useRef(null);
@@ -35,20 +35,8 @@ const Tableau = (props) => {
   const defaultUrl = data.url;
   const url = props.url || defaultUrl;
 
-  const setTableauScript = (version) => {
-    switch (version) {
-      case '2.8.0':
-        console.log('Loading Tableau 2.8.0');
-        //import { tableau as tableau280 } from "tableau280"; && return tableau280
-        break;
-      default:
-        console.log(`Sorry, we don't support ${version} yet.`);
-    }
-  };
-
   //load tableau from script tag
   const tableau = loadTableauScript(() => {}, version);
-  //TODO: if using an importmap then there would be tableau1, tableau2, etc and ^^ would need a switch for each version. This way, the scripts needed are there, loaded dinamicaly
 
   const onFilterChange = (filter) => {
     const newFilters = { ...filters.current };
@@ -198,6 +186,7 @@ const Tableau = (props) => {
     tableau,
     toolbarPosition,
     url,
+    version,
   ]);
 
   React.useEffect(() => {
@@ -217,6 +206,13 @@ const Tableau = (props) => {
   return (
     <div id="tableau-wrap">
       <div id="tableau-outer">
+        {loaded ? (
+          ''
+        ) : (
+          <div className="tableau-loader">
+            <span>Loading Tableau v{version}</span>
+          </div>
+        )}
         <div
           className={cx('tableau', version, {
             'tableau-scale': autoScale,

diff --git a/src/helpers.js b/src/helpers.js
@@ -20,7 +20,6 @@ const loadTableauScript = (callback, version) => {
   if (existingScript && callback) callback();
 
   const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
-  console.log('loading the tableau script version:', version);
   return tableau;
 };
 

diff --git a/src/less/tableau.less b/src/less/tableau.less
@@ -49,4 +49,43 @@
   }
 }
 
+.tableau-loader {
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  border-radius: 5px;
+  align-items: center;
+  height: 100%;
+  overflow: hidden;
+  background-size: 100px 100px;
+  background-image: linear-gradient(
+    -45deg,
+    #5ac5f1 25%,
+    #96bbde 25%,
+    #96bbde 50%,
+    #5ac5f1 50%,
+    #5ac5f1 75%,
+    #96bbde 75%
+  );
+  animation: anim 1s linear infinite;
+}
+
+.tableau-loader span {
+  margin: 6px auto;
+  text-align: center;
+  color: white;
+  font-weight: bold;
+}
+
+@keyframes anim {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 50px 50px;
+  }
+}
+
 .loadAddonOverrides();