-
Notifications
You must be signed in to change notification settings - Fork 0
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
Conversation
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" | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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, | |
} | |
)} |
There was a problem hiding this comment.
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
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" | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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, | |
} | |
)} |
There was a problem hiding this comment.
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
There was a problem hiding this 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
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