OV-6: Loader component #14
Conversation
sergiy4
requested review from
nikita-remeslov,
anton-otroshchenko and
sofiia-trokhymchuk
as code owners
There was a problem hiding this comment.
use layout components for ui lib - https://v2.chakra-ui.com/docs/components/box
you can avoid some custom styles
| export { Loader } from './loader/loader.js'; | ||
| export { LoaderOverlay } from './loader-overlay/loader-overlay.js'; |
There was a problem hiding this comment.
Please unite these 2 components
There was a problem hiding this comment.
Or pass Loader through props as children and leave it as Overlay
There was a problem hiding this comment.
I should export both of them.
There was a problem hiding this comment.
you can export both of them but there is no point in just importing Loader in LoaderOverlay component
Make it accept any component as children
There was a problem hiding this comment.
Okay, I've just done this.
frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts
Show resolved
Hide resolved
| @@ -0,0 +1,35 @@ | |||
| import { Box, Circle, Flex, keyframes, Text } from '@chakra-ui/react'; | |||
|
|
|||
| const spin = keyframes` | |||
There was a problem hiding this comment.
./contstants/spin-animation.ts
There was a problem hiding this comment.
also, you should add some transitions to overlay - https://v2.chakra-ui.com/docs/components/transitions
because it will cover all screen
frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts
Show resolved
Hide resolved
There was a problem hiding this comment.
export Loader component as well
| @@ -0,0 +1,8 @@ | |||
| import { keyframes } from '@chakra-ui/react'; | |||
|
|
|||
| const spin = keyframes` | |||
There was a problem hiding this comment.
| const spin = keyframes` | |
| const SPIN_ANIMATION = keyframes` |
|
|
||
| const LoaderOverlay = (): JSX.Element => { | ||
| return ( | ||
| <Fade in={true}> |
There was a problem hiding this comment.
Does transition work if you hide overlay from the parent component?
| animation={`${SPIN_ANIMATION} 1s linear infinite`} | ||
| ></Circle> | ||
| </Box> | ||
| <Text fontSize="lg" marginTop="10px"> |
There was a problem hiding this comment.
Maybe we should use the shortcuts that chakra ui is providing us with (e.g. alignItems -> align, marginTop -> mt)?
There was a problem hiding this comment.
I don't like shortcasts because they are hard to read
This PR adds Loader and LoaderOverlay components.
