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();