-
Notifications
You must be signed in to change notification settings - Fork 2
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
✨(front) turn on camera when applying effects #334
Conversation
0694320
to
5e78ed5
Compare
45b4f1b
to
e51ad4d
Compare
const loader = cva({ | ||
base: { | ||
borderRadius: '50%', | ||
position: 'relative', | ||
animation: 'rotate 1s linear infinite', | ||
'&:before, &:after': { | ||
content: '""', | ||
boxSizing: 'border-box', | ||
position: 'absolute', | ||
inset: '0', | ||
borderRadius: '50%', | ||
borderStyle: 'solid', | ||
borderColor: 'white', | ||
}, | ||
_before: { | ||
animation: 'prixClipFix 2s linear infinite', | ||
}, | ||
_after: { | ||
borderColor: 'white', | ||
animation: | ||
'prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse', | ||
inset: 6, | ||
}, | ||
}, | ||
variants: { | ||
size: { | ||
small: { | ||
width: '24px', | ||
height: '24px', | ||
'&:before, &:after': { | ||
borderWidth: '2px', | ||
}, | ||
}, | ||
}, | ||
}, | ||
defaultVariants: { | ||
size: 'small', | ||
}, | ||
}) | ||
|
||
export const Loader = () => { | ||
return <div className={loader()}></div> | ||
} |
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 could use the same approach of the checkbox.ts
, using styled
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.
Yep, but I don't understand why we is cva and styled used here and there and not only one of those? Maybe I'm missing something ofc
e51ad4d
to
33080cf
Compare
This component will be used for various purpose.
useSyncAfterDelay allows to enable loading indicators only if the loading takes more than a specific time. It prevent blinking effect when the loading time is nearly instant.
We want to automatically turn on the camera if its off when enabling a new effect.
33080cf
to
d492b6e
Compare
Enable camera when applying effects
Enregistrement.de.l.ecran.2025-02-04.a.16.35.59.mov
Show loader if it takes times
useSyncAfterDelay
allows to enable loading indicators only if the loading takes more than a specific time. It prevent blinking effect when the loading time is nearly instant.Loading effects:
Please see below
Mon.film.2.mp4