merge with better_tableau_import

eea · Jan 12, 2023 · 2d8f314 · 2d8f314
2 parents d83417d + d6f3c86
commit 2d8f314
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 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);
@@ -36,7 +36,7 @@ const Tableau = (props) => {
   const url = props.url || defaultUrl;
 
   //load tableau from script tag
-  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
+  const tableau = loadTableauScript(() => {}, version);
 
   const onFilterChange = (filter) => {
     const newFilters = { ...filters.current };
@@ -186,6 +186,7 @@ const Tableau = (props) => {
     tableau,
     toolbarPosition,
     url,
+    version,
   ]);
 
   React.useEffect(() => {
@@ -205,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
@@ -18,14 +18,21 @@ const loadTableauScript = (callback, version) => {
   }
   //callback, if needed
   if (existingScript && callback) callback();
+
+  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
+  return tableau;
 };
 
-const isMyScriptLoaded = (id) => {
+const isMyScriptLoaded = (version) => {
   //check for loaded Tableau script in dom scripts
   var scripts = document.getElementsByTagName('script');
   for (var i = scripts.length; i--; ) {
     // eslint-disable-next-line eqeqeq
-    if (scripts[i].id == `tableauJS`) return true;
+    if (
+      scripts[i].src ===
+      `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`
+    )
+      return true;
   }
   return false;
 };

diff --git a/src/less/tableau.less b/src/less/tableau.less
@@ -63,6 +63,45 @@
       padding: 10px;
     }
   }
+
+  .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();