-
Notifications
You must be signed in to change notification settings - Fork 52
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
[Feature]: <FadeIn/> supporting react-dom, react-native #1109
Comments
manudeli
changed the title
[Feature]: <FadeIn/>
[Feature]: <FadeIn/> not only support react-dom, react-native
Jul 19, 2024
manudeli
added a commit
that referenced
this issue
Jul 30, 2024
related with #1093 #1109 #1072 #1071 # Overview <!-- A clear and concise description of what this pr is about. --> I want to support isomorphic `<InView/>`, `<FadeIn/>` for react-dom and react-native at once. This pull request is start for it - @suspenisve/react-native - @suspenisve/react-dom ![Jul-27-2024 05-05-21-min](https://github.com/user-attachments/assets/ce5bc8bd-9a96-42b3-b954-672dacbc0dec) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
manudeli
changed the title
[Feature]: <FadeIn/> not only support react-dom, react-native
[Feature]: <FadeIn/> supporting react-dom, react-native
Jul 31, 2024
manudeli
added a commit
that referenced
this issue
Aug 3, 2024
related with #1093 #1109 #1072 #1071 # Overview <!-- A clear and concise description of what this pr is about. --> I want to support isomorphic `<InView/>`, `<FadeIn/>` for react-dom and react-native at once. This pull request is start for it - @suspenisve/react-native - @suspenisve/react-dom ![Jul-27-2024 05-05-21-min](https://github.com/user-attachments/assets/ce5bc8bd-9a96-42b3-b954-672dacbc0dec) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
manudeli
added a commit
that referenced
this issue
Aug 3, 2024
related with #1093 #1109 #1072 #1071 # Overview <!-- A clear and concise description of what this pr is about. --> I want to support isomorphic `<InView/>`, `<FadeIn/>` for react-dom and react-native at once. This pull request is start for it - @suspenisve/react-native - @suspenisve/react-dom ![Jul-27-2024 05-05-21-min](https://github.com/user-attachments/assets/ce5bc8bd-9a96-42b3-b954-672dacbc0dec) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
manudeli
added a commit
that referenced
this issue
Aug 3, 2024
related with #1093 #1109 #1072 #1071 # Overview <!-- A clear and concise description of what this pr is about. --> I want to support isomorphic `<InView/>`, `<FadeIn/>` for react-dom and react-native at once. This pull request is start for it - @suspenisve/react-native - @suspenisve/react-dom ![Jul-27-2024 05-05-21-min](https://github.com/user-attachments/assets/ce5bc8bd-9a96-42b3-b954-672dacbc0dec) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
manudeli
added a commit
that referenced
this issue
Aug 3, 2024
related with #1093 #1109 #1072 #1071 # Overview <!-- A clear and concise description of what this pr is about. --> I want to support isomorphic `<InView/>`, `<FadeIn/>` for react-dom and react-native at once. This pull request is start for it - @suspenisve/react-native - @suspenisve/react-dom ![Jul-27-2024 05-05-21-min](https://github.com/user-attachments/assets/ce5bc8bd-9a96-42b3-b954-672dacbc0dec) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
This is next plan |
People can be co-author:
|
manudeli
added a commit
that referenced
this issue
Nov 23, 2024
related with #1109 # `<FadeIn/>` Influenced by blog posts such as https://tech.kakaopay.com/post/skeleton-ui-idea/, we provide a component called `<Delay/>` in @suspensive/react. However, since `<Delay/>` blocks the rendering of children for a certain period of time, it affects the time when the `<PostListSkeleton/>` component is reflected on the html. Therefore, the skeleton itself can appear suddenly, and I thought this part was not good in terms of UX. Therefore, I thought that if we use a component like `<FadeIn/>` (name undecided), it will be reflected on the html immediately and the animation will be used to gradually display it, making it easier to implement a more natural UI. ## Example ```tsx export default function Page() { return ( <div> <ErrorBoundary fallback={({ error }) => <>{error.message}</>}> {Array.from({ length: 20 }).map((_, i) => { const userId = i + 1 return ( <Suspense key={userId} clientOnly fallback={ <FadeIn delay={200} duration={1000}> {skeleton} </FadeIn> } > <SuspenseQuery {...query.user(userId)}> {({ data: user }) => ( <FadeIn duration={200} inViewOptions={{ triggerOnce: true }} className="max-w-[344px]"> <h1 className="text-lg font-bold">{user.username}</h1> <p className="text-xs">{user.userAgent}</p> <p>{user.age}</p> <p>{user.maidenName}</p> <div className="mb-6" /> </FadeIn> )} </SuspenseQuery> </Suspense> ) })} </ErrorBoundary> </div> ) } const skeleton = ( <div role="status" className="mb-6 animate-pulse space-y-2"> <div className="h-4 w-[42px] rounded-sm bg-gray-300 dark:bg-gray-600" /> <div className="h-2 w-[34px] rounded-sm bg-gray-300 dark:bg-gray-600" /> <div className="h-2 w-[344px] rounded-sm bg-gray-300 dark:bg-gray-600" /> <div className="h-2 w-[344px] rounded-sm bg-gray-300 dark:bg-gray-600" /> <div className="h-4 w-[42px] rounded-sm bg-gray-300 dark:bg-gray-600" /> <div className="h-4 w-[34px] rounded-sm bg-gray-300 dark:bg-gray-600" /> </div> ) ``` ![chrome-capture-2024-11-18 (2)](https://github.com/user-attachments/assets/d21be685-1c64-43bd-937f-4ca5385a00b5) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Juhyeok Kang <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Package Scope
etc
Description
Possible Solution
No response
etc.
No response
The text was updated successfully, but these errors were encountered: