States of the plugin panels

Plugin panels go through various states when performing an operation in the network. Each state has specific design needs.

Default/Empty state

This is the state of the plugin before any interaction has occurred. In this initial state, the plugin should provide a concise prompt explaining what to do to make use of the plugin. For example, Select a pipe to perform a shutdown.

Active

The user has carried out an action on the map or panel following the plugin instructions. The action area becomes available to use and/or populated with insights.

Disabled/Loading

Some plugins may need to block interaction while the calculations are being made. We recommend using the loading spinner animation we provide in the Figma file.