Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ddfbra 130 pre fetching og loading states #35

Merged
merged 12 commits into from
Nov 12, 2024

Conversation

ThomasGross
Copy link
Contributor

Link to issue

https://reload.atlassian.net/browse/DDFBRA-130
https://reload.atlassian.net/browse/DDFBRA-167

Description

Ghost loading and polish on search result page

@spaceo spaceo self-requested a review November 8, 2024 12:58
Comment on lines +74 to +78
className={cn(
`absolute inset-0 h-auto w-full overflow-hidden rounded-sm object-contain shadow-cover-picture
transition-all duration-500 will-change-transform`,
imageLoaded ? "opacity-100" : "opacity-0"
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
className={cn(
`absolute inset-0 h-auto w-full overflow-hidden rounded-sm object-contain shadow-cover-picture
transition-all duration-500 will-change-transform`,
imageLoaded ? "opacity-100" : "opacity-0"
)}
className={cn(
`shadow-cover-picture absolute inset-0 h-auto w-full overflow-hidden rounded-sm object-contain
transition-all duration-500 will-change-transform`,
{
"opacity-0": !imageLoaded,
"opacity-100": imageLoaded,
}
)}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this way of treating conditionals in clsx

Comment on lines 62 to 67
className={cn(
"mx-[-10px] mt-[-10px] flex gap-1 px-[10px] pt-[10px] text-typo-caption",
!isLast && "flex-col",
isLast && "flex-row flex-wrap content-start",
!isExpanded && "h-[102px] overflow-hidden"
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
className={cn(
"mx-[-10px] mt-[-10px] flex gap-1 px-[10px] pt-[10px] text-typo-caption",
!isLast && "flex-col",
isLast && "flex-row flex-wrap content-start",
!isExpanded && "h-[102px] overflow-hidden"
)}
className={cn(
"mx-[-10px] mt-[-10px] flex gap-1 px-[10px] pt-[10px] text-typo-caption",
{
"flex-row flex-wrap content-start": isLast,
"flex-col": !isLast,
"h-[102px] overflow-hidden": !isExpanded,
}
)}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You get my point :) Consider, if you agree, using that pattern for conditionals in clsx

Copy link
Contributor

@spaceo spaceo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Nice additions
Please look at comments about cn(clsx) formatting with conditionals

@ThomasGross ThomasGross merged commit 50bdb26 into main Nov 12, 2024
8 checks passed
@ThomasGross ThomasGross deleted the DDFBRA-130-pre-fetching-og-loading-states branch November 12, 2024 08:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants