search

ataverascrespo / RecordRack

Digital music collections and social platform
https://recordrack.ca
GNU General Public License v3.0
1 stars 1 forks source link

Unusual loading lines on images? #3

Closed ataverascrespo closed 11 months ago

ataverascrespo commented 11 months ago

On user page load, there are some weird gray lines loading in place of the images. They seem to be an artifact of the image, so I think I need to look into what happens when they load.

I had already tried a lazy load package for React but it caused some unwanted behaviour (specifically, when navigating back to the rack list page from the record view page, it would send the view up to the top. Not ideal if you're 40 albums deep). So I'll look more into it.

ataverascrespo commented 11 months ago

After some procrastinating I found the fix, and it was pretty easy. It wasn't an artifact of the image or an issue with the loading thankfully.

Each rendered 'record' is a react-router <Link> element. The child of that element is an img tag wrapped in a shacdn/ui <Card> component. The default Tailwind styling for <Card> has borders defined - which aren't visible when the image is rendered, but are visible beforehand.

I originally overrode the global styling for the <Card> but that affected more elements of the site than I thought. So I just had to override the <Card> that was giving me issues.