For my dashboards that have long load times I have made a dynamic loader based on phase of the loading page. when each phase is started the loader description changes.
First I create a New-UDElement and define my loaders (see example)
New-UDElement -Id 'CloudLoadingMessage' -Tag div -Endpoint {
if ($CloudCostSummaryLoading -eq $true) {
New-UDColumn -Size 12 -LargeOffset 3 -Content {
New-UDHeading -Text "Loading Clouds" -Size 6
New-UdRow {
New-UDColumn -LargeOffset 1 -Content {
New-UDImage -Url "url-to-gif/loading.gif" -Width 67 -Height 20
}
}
}
} elseif ($GetAccountsAPILoading -eq $true) {
New-UDColumn -Size 12 -LargeOffset 3 -Content {
New-UDHeading -Text "Loading Accounts" -Size 6
New-UdRow {
New-UDColumn -LargeOffset 1 -Content {
New-UDImage -Url "url-to-gif/loading.gif" -Width 67 -Height 20
}
}
}
} else {}
}
Then within each phase of the page ( in my page I have 6-7 different tables that load data from different APIs) so within each column containing the related table I have set the loaders variable to $true ($CloudCostSummaryLoading = $true) and then a Sync-UDElement -id ‘CloudLoadingMessage’ which forces the New-UDElement from above to go through the if/elseif changing the loader text for each phase.
At the end of the Colunm I set the loader variable to $false so when the Sync-UDElement is loaded again in the next phase the correct loader message will appear.
Hope this helps.