Loading Indicator
A loading indicator is displayed when your app is retrieving data. This stops users from being able to interact with your app while the server returns data.
The defualt loading indicator.
Starting and stopping the indicator manually
To start or stop the indicator manually, start by creating an instance of the loading indicator using loading_indicator(), and then call start() or stop() as needed:
from time import sleep
# Create an instance of the loading spinner and store it in a variable
self.loading_indicator = anvil.server.loading_indicator()
# Start and stop the indicator however you wish
self.loading_indicator.start()
sleep(5)
self.loading_indicator.stop()Here’s a clone link to an example app that demonstrates the behaviour:
Loading indicators for individual components
In some cases, you might want to use a loading indicator to temporarily block user interaction with a specific component or container.
An example of multiple loading indicators in a UI.
You can do this using a with statement which calls anvil.server.loading_indicator. anvil.server.loading_indicator() can take a component as an argument, so you can use it within a block like the one below to display an indicator over that component:
"""An example function which overlays a indicator on top of the
card_1 component and stops users being able to interact with it"""
def overlay_indicator_on_card_1(self, **event_args):
# This block takes the component we want to overlay a indicator onto
# and keeps the indicator there until the inner code is executed
with anvil.server.loading_indicator(self.card_1):
anvil.server.call('my_server_function')with anvil.loading_indicator block, server calls will not trigger the global loading indicator.Here’s a clone link to an example app that demonstrates using indicators for individual components:
Minimum height
When creating an instance of the loading indicator, you can define its minimum height with the min_height argument:
def start_large_indicator_button_click(self, **event_args):
"""This method is called when the button is clicked"""
with anvil.server.loading_indicator(self.outlined_card, min_height="50vh"):
anvil.server.call('foo')Here’s a clone link to an example app that demonstrates the behaviour:
Customising and styling the loading indicator
For information on changing and/or styling the default loading indicator, see the UI styling documentation.
Do you still have questions?
Our Community Forum is full of helpful information and Anvil experts.