Fix layout on assets detail page

[kattylucy]

• Asset detail page: Add < no data available > if data is empty to avoid layout emptiness/switching (picture 1)
• Liquidity page: Prevent layout switching by reorganizing rendering of component (picture 2)
• Prime page: Add box around graph layout to maintain dimensions. (picture 3)

#2223

• [ x ] Dev

Picture 1

Picture 2

https://github.com/centrifuge/apps/assets/51223655/e0334def-5766-4eac-ba7f-43e4d07faafc

Picture 3

[github-actions[bot]]

PR deployed in Google Cloud URL: https://app-pr2279.k-f.dev Commit #: 2ef57d93954d39c5884e8f2b1dee27ecc650d969
To access the functions directly check the corresponding deploy Action

[github-actions[bot]]

PR deployed in Google Cloud URL: https://pr2279-app-ff-production.k-f.dev Commit #: 2ef57d93954d39c5884e8f2b1dee27ecc650d969
To access the functions directly check the corresponding deploy Action

[sophialittlejohn]

This looks good! One more thing that would be great in this ticket is if we could prevent the vertical jumping of the page on load which happens while the charts are loading. There's an example here that shows what I mean. Also I got the name wrong, the ticket was supposed to say fix Cumulative layout shift (CLS) instead of content, sorry! So the idea would be to reserve the space in advance for the charts so when they load they fill the space and don't cause the content beneath it to jump.

[kattylucy]

Ok, so I did some research into CLS - The best way to fix it, as suggested is to add a fixed height to the container around the graph. Which I did, now, if the data is non-available for the graph, we then have a big container with no data on it (which can be weird), I kept the changes and you can check asset performance graph to see it working.

If we decide we don't want an empty container when no data is available and we want to hide the container (as it was prev), we need to be ok with the content switching in the x axis, so in this example, the key metrics card switching to the left.

Let me know which option you prefer and I'll make the changes. Im personally fine with the fixed height to avoid any jumping either on the x or y axis of the page.

@sophialittlejohn

[sophialittlejohn]

I think it's better to fix the height because we will generally assume that the subquery is working and the data will load. The table on the asset detail page looks good now when it loads, no more content jumping 🙌 if you could just do the same for the rest of the graphs that would be amazing!

• graph on pool detail page
• graph on prime page
• graph on portfolio page

[kattylucy]

Yes, will do that - I was waiting to confirm which approach to take. Thank YOU! @sophialittlejohn