Small example on a loading Div?

Community Support
,
6

Ok, managed to solve it! Used the add_next_tick_callback inside the dataloader function:D

# -- coding: utf-8 --
"""
Created on Thu Jan 21 11:55:35 2021

@author: zana.kajolli
"""
from bokeh.models import Div, Button, CustomJS
from bokeh.events import DocumentReady
from bokeh.layouts import column
from bokeh.io import curdoc
from bokeh.document import Document
import time

spinner_text = """
<!-- https://www.w3schools.com/howto/howto_css_loader.asp -->
<div class="loader">
<style scoped>
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 
</style>
</div>
"""

doc = curdoc()


loadData = Button(width = 200, label="Load Data", button_type="success")
# div_spinner = Div(text="",width=120,height=120)
div_spinner = Div(text=spinner_text,width=120,height=120,visible=False)

layout = column(div_spinner, loadData)

cb = CustomJS(args=dict(div_spinner=div_spinner)
              ,code='''
              console.log('cb triggered!')
              div_spinner.change.emit()''')
              
div_spinner.js_on_change('visible',cb)

def dataLoader():
    print('loading')
    # div_spinner.text = spinner_text
    div_spinner.visible = True
    doc.add_next_tick_callback(doingStuff)

def doingStuff():
    print('doing stuff')
    time.sleep(5)
    print('Done')
    div_spinner.visible=False
    
#def hideSpinner():
#    print('Done')
#    # div_spinner.text = ""
#    div_spinner.visible=False
        
loadData.on_click(dataLoader)
#loadData.on_click(doingStuff)
#loadData.on_click(hideSpinner)
# curdoc().on_event('document_ready', hideSpinner)

doc.add_root(layout)
3 Likes