Spinning refresh data table button

METHOD 1

How it works
Spotfire link control that refreshes data table through ironpython. The button starts to spin when clicked. When the data table finishes loading, a document property gets updated with current timestamp, which is rendered as a label in the text area. When this label changes, the button stop spinning.

html
The first Spotfire control is a link that runs a script that refresh the data table and updates a document property. The second control is a label from a document property of data type Date Time

<center>
<div size=3  id=spinner><SpotfireControl id="add6c340686046cb92e10c16ac96680c" /></div>
<br/>
<font id ='updateLabel' size=1 >
Last Reload : <SpotfireControl id="8d5975f94c9442ae8badec2f462aa8f2" />
</font>
</center>

<style>

.spinner {
  width:20px;

  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: 20;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(720deg);
    }
}
</style>


script
from System import DateTime
dt.Refresh()
Document.Properties[dp]=DateTime.Now

js
 $("#spinner").on('click',function(){
var $this = $(this).addClass('spinner');
});
  
  
//function when label changes
var myFunction = function(oldValue,newValue){
$("#spinner").removeClass('spinner')
}
targetDomId = "updateLabel"

//no need to change after this line.
var target = document.getElementById(targetDomId)

//callback is the function to trigger when target changes
var oldVal = target.innerText.trim()
var callback = function(mutations) {
 newVal=$('#'+targetDomId+' ').text()
 if(newVal!=oldVal) myFunction(oldVal,newVal)
 oldVal = newVal;
}

//this is to glue these two together
var observer = new MutationObserver(callback);
var opts = {
    childList: true, 
    attributes: true, 
    characterData: true, 
    subtree: true
}
observer.observe(target,opts);



METHOD 2
ActiveVisual is a text area holding the animation. In this case is just a label. Thanks to Jolene Roberson!

script

from Spotfire.Dxp.Application.Visuals import *

from System.Collections.Generic import List, Dictionary

from Spotfire.Dxp.Data import DataTable

from Spotfire.Dxp.Application.Scripting import ScriptDefinition

from Spotfire.Dxp.Framework.ApplicationModel import NotificationService

import clr

import time

activeVisual.As[HtmlTextArea]().HtmlContent = "Please wait.."

activeVisual = Document.ActivePageReference.ActiveVisualReference

Document.Properties['refreshStatus'] = 'Loadng'

if Document.Properties['refreshStatus'] != 'Ready':

    notify = Application.GetService[NotificationService]()

    # Refresh Callback function

    def execCallBack(exception, Document=Document, notify=notify):

        if not exception:

            Document.Properties['refreshStatus'] = 'Ready'

            activeVisual.As[HtmlTextArea]().HtmlContent = 'Done!'

        else:

            activeVisual.As[HtmlTextArea]().HtmlContent = 'Error!'

            notify.AddErrorNotification('Error refreshing table(s)','Error details', str(exception))

    # Note that more than one table can be added to the List object. Repeat the Add() method if needed for multiple tables to refresh.

    dataTables = List[DataTable]()

    dataTables.Add(Document.Data.Tables['Table1'])

    dataTables.Add(Document.Data.Tables['Table2'])

    Document.Data.Tables.RefreshAsync(dataTables, execCallBack)