Feat/doc editor skeleton #1491
Feat/doc editor skeleton #1491
Conversation
Ovgodd
force-pushed
the
feat/doc-editor-skeleton
branch
from
9707dc5 to
f976a72
Compare
|
Size Change: +1.11 kB (+0.03%) Total Size: 3.66 MB
|
adds a skeleton component for initial loading of the document editor Signed-off-by: Cyril <[email protected]>
integrates loading skeleton and creation state from zustand store Signed-off-by: Cyril <[email protected]>
Ovgodd
force-pushed
the
feat/doc-editor-skeleton
branch
from
f976a72 to
5b99563
Compare
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; |
There was a problem hiding this comment.
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| inset: 0; |
There was a problem hiding this comment.
We have a Overlay component already, could we use it ?
| import { tokens, useCunninghamTheme } from '@/cunningham'; | ||
| import { useResponsiveStore } from '@/stores'; | ||
|
|
||
| const colors = tokens.themes.default.theme.colors; |
There was a problem hiding this comment.
To leverage the theming we should use useCunninghamTheme to get the colors.
| const SkeletonLine = ({ | ||
| width = '100%', | ||
| height = '16px', | ||
| margin = '0', | ||
| }: { | ||
| width?: string; | ||
| height?: string; | ||
| margin?: string; | ||
| }) => { |
There was a problem hiding this comment.
Can we extend the interface with BoxType ?
Like that we will benefit from all the props of Box.
Here an example of implementation: https://github.com/suitenumerique/docs/blob/main/src/frontend/apps/impress/src/components/Overlayer.tsx
| ); | ||
| }; | ||
|
|
||
| const SkeletonCircle = ({ size = '32px' }: { size?: string }) => { |
There was a problem hiding this comment.
Same, can we extend the interface with BoxType ?
Like that we will benefit from all the props of Box.
Here an example of implementation: https://github.com/suitenumerique/docs/blob/main/src/frontend/apps/impress/src/components/Overlayer.tsx
|
|
||
| {/* Metadata (role and last update) */} | ||
| <Box $direction="row" $gap="0.5rem" $align="center"> | ||
| <SkeletonLine width="260px" height="12px" /> |
There was a problem hiding this comment.
In responsive, on small screen it gets out of screen:
| <SkeletonLine width="260px" height="12px" /> | |
| <SkeletonLine maxWidth="260px" height="12px" /> |
There was a problem hiding this comment.
As talk together, maybe something very generic could be nice (BooleanStore ?), with Record<string, boolean>; to be able to have multiple toggles here and there.
| overflow-x: clip; | ||
| `} | ||
| > | ||
| <DocCreationOverlay /> |
There was a problem hiding this comment.
Same I think it could be nice to have something more generic, that can be used for other things that DocCreation.
The problem that I find as well, is I get a bit the flickering effect, if we could implement a light transition before unmounting the skeleton would be great (fadeOut / fadeIn ?)
2 participants
Purpose
Introduce a loading skeleton in the DocEditor and manage its visibility using Zustand. Ensure the loader is removed properly in case of errors to prevent it from staying stuck on screen.
issue : 1452
skeleton.mp4
Proposal