diff --git a/src/Tableau/View.jsx b/src/Tableau/View.jsx
index 4cec67c..9c5cdb2 100644
--- 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 (
+ {loaded ? (
+ ''
+ ) : (
+
+ Loading Tableau v{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
index df51085..fa02707 100644
--- 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();