Overview-Engine Row with Progress Indicator

What is the recommended way to have a progress indicator for each row individually?

Use case

We want to provided feedback to the user during the processing of an document asynchronously, that this document is currently not editable. At the moment we disable the row, but it would be nicer to overlay the progress indicator the a label what is happening currently. E.g. deleting or publishing.

Hi @stefan-cold-haze

I should be possible with the additionalContentRenderer from componentRenderer props in Table or TreeTable component. You can have a quick reference at this widget showcase https://www.mgm-tp.com/a12.htmlshowcase/38.1.0/#/widgets/data-display/tree-table/basic#async

According to the example, if you only add the ProgressIndicator as the direct child, you don’t really have to set a fixed width or height as the progress indicator will try to use the whole provided space of that row hence even less styling to worry about :slight_smile:

I don’t know any recommendation here..I guess its upon your UX team to decide :smiley:

For a nice blocking effect i like to use this A12 Widget in the past:
Progress Bar

Like used in that example:
List with Progress Bar