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

Screen.Recording.2024-07-11.at.11.42.43.AM.mov

Picture 3

[github-actions]

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

[github-actions]

PR deployed in Google Cloud
URL: https://pr2279-app-ff-production.k-f.dev
Commit #: 2ef57d9
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

[sophialittlejohn]

Why is every second item being skipped in the data array?

[kattylucy]

I think it was mostly for the graphs with a lot of data to avoid showing every item and have more space for the dates. I changed it back

[sophialittlejohn]

I think that should be handled by the charts lib (recharts) itself We've done it in some other charts. You can programmatically determine how many data points should be shown

[kattylucy]

Do we want to do that or do we want to keep the data as in the picture (with -35 degree) so it doesn't look all grouped together (impossible to read)? I'm open to both options but I'm not sure if we want to display all of the data anyways.

[sophialittlejohn]

Looks good!