# Busy Overlay
<flow-busy-overlay> Use the busy overlay to indicate that data-display components are being updated.
The busy overlay component displays a translucent cover and progress ring over its child elements and disables interaction with covered controls. It should be used to cover display components such as gauges, charts and tables to indicate that data is being queried and that the display components are in a indeterminate state.
The busy attribute of the component should be set to a Flo.w reactive expression returning a boolean value and controls visibility of the overlay. The overlay is shown after a short delay when the busy attribute transitions to true. This is to eliminate distracting flicker of the overlay when operations complete quickly and the busy attribute is reset to false.
TIP
Set the busy attribute to the busy property of a Flo.w reactive query or use a computed property to combine busy states from multiple queries.
# Examples
# Colors
Set the color of the progress ring using one of the application palette named colors.
# Overlay Parent
The busy overlay component can also be used to overlay its parent element by setting the
overlay-parent element. This may be more appropriate than using it as a wrapper element where the HTML structure dictates.
# Reactive Expression
The example below shows how the busy attribute can be bound to a Flo.w reactive expression returning a boolean result. Typically, this is used to bind the overlay to a Flo.w reactive query's busy property or a computed property combining the busy states from multiple queries.