In one of our projects we use the
react component useStreamQueries
const assets = useStreamQueries(Financial.PurchaseOrder);
This nicely paints all the Purchase Orders in a list
When we do an interaction on one of the items on the list by executing some daml code
example below ofadding details to the PurchaseOrder
nonconsuming AddPoDetailData : ContractId PurchaseOrder with newpodetaildata : PurchaseOrderDetaildata do archive self create this with purchaseorderdetaildata = newpodetaildata
Then we notice that UseStreamQueries component repaints the list in React and the original Item is moved to the bottom of our list.
Logically that makes sense, since we archived the old contract and created a new one.
However this creates a confusing UX for our users as data is shifting on the page from the original position in the list (lets say 5th place) to the bottom
Is there a trick (react trick or daml trick) to keep the list in its original order so information is not shifting around on the page. ?