From 0b379968996bb5ded799ad435140f1a349f62b11 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 18 Mar 2026 16:58:05 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB(frontend)=20fix=20the=20help=20but?= =?UTF-8?q?ton=20to=20the=20bottom=20in=20tree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The tree take a bit of time to load, during this time the help button was not at the bottom of the left panel. To fix this issue, we addded a skeleton for the tree in wait for the tree to load, by doing this, the help button is always at the bottom. --- CHANGELOG.md | 4 ++ .../docs/doc-tree/components/DocTree.tsx | 3 +- .../components/LeftPanelContent.tsx | 59 ++++++++--------- .../components/LeftPanelDocContent.tsx | 16 +++-- .../components/DocEditorSkeleton.tsx | 63 +----------------- .../skeletons/components/SkeletionUI.tsx | 65 +++++++++++++++++++ .../skeletons/components/TreeSkeleton.tsx | 30 +++++++++ 7 files changed, 143 insertions(+), 97 deletions(-) create mode 100644 src/frontend/apps/impress/src/features/skeletons/components/SkeletionUI.tsx create mode 100644 src/frontend/apps/impress/src/features/skeletons/components/TreeSkeleton.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 0751d7e6..594f78c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ and this project adheres to ## [Unreleased] +### Changed + +- 💫(frontend) fix the help button to the bottom in tree #2073 + ## [v4.8.2] - 2026-03-19 ### Changed diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx index 1ef7fbc2..c18a6d5e 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx @@ -18,6 +18,7 @@ import { useMoveDoc, useTrans, } from '@/docs/doc-management'; +import { TreeSkeleton } from '@/features/skeletons/components/TreeSkeleton'; import { CLASS_DOC_TITLE } from '../../doc-header'; import { KEY_DOC_TREE, useDocTree } from '../api/useDocTree'; @@ -257,7 +258,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => { }, [currentDoc, treeContext]); if (!treeContext || !treeContext.root) { - return null; + return ; } return ( diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx index 112bf36e..44a38ab5 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx @@ -2,7 +2,6 @@ import { useRouter } from 'next/router'; import { css } from 'styled-components'; import { Box, SeparatedSection } from '@/components'; -import { useDocStore } from '@/docs/doc-management'; import { LeftPanelTargetFilters } from './LefPanelTargetFilters'; import { LeftPanelDocContent } from './LeftPanelDocContent'; @@ -12,33 +11,35 @@ export const LeftPanelContent = () => { const router = useRouter(); const isHome = router.pathname === '/'; const isDoc = router.pathname === '/docs/[id]'; - const { currentDoc } = useDocStore(); - return ( - <> - {isHome && ( - <> - - - - - - - - - - )} - {isDoc && currentDoc && } - - ); + if (isHome) { + return ( + <> + + + + + + + + + + ); + } + + if (isDoc) { + return ; + } + + return null; }; diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx index 3f7f2536..2ee57e29 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx @@ -1,15 +1,13 @@ import { useTreeContext } from '@gouvfr-lasuite/ui-kit'; import { Box } from '@/components'; -import { Doc } from '@/docs/doc-management'; +import { Doc, useDocStore } from '@/docs/doc-management'; import { DocTree } from '@/docs/doc-tree/'; +import { TreeSkeleton } from '@/features/skeletons/components/TreeSkeleton'; -export const LeftPanelDocContent = ({ doc }: { doc: Doc }) => { +export const LeftPanelDocContent = () => { const tree = useTreeContext(); - - if (!tree) { - return null; - } + const { currentDoc } = useDocStore(); return ( { $css="width: 100%; overflow-y: auto; overflow-x: hidden;" className="--docs--left-panel-doc-content" > - + {tree && currentDoc ? ( + + ) : ( + + )} ); }; diff --git a/src/frontend/apps/impress/src/features/skeletons/components/DocEditorSkeleton.tsx b/src/frontend/apps/impress/src/features/skeletons/components/DocEditorSkeleton.tsx index d09f6b28..56aaf35b 100644 --- a/src/frontend/apps/impress/src/features/skeletons/components/DocEditorSkeleton.tsx +++ b/src/frontend/apps/impress/src/features/skeletons/components/DocEditorSkeleton.tsx @@ -1,69 +1,12 @@ -import { css, keyframes } from 'styled-components'; - -import { Box, BoxType } from '@/components'; +import { Box } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; import { useResponsiveStore } from '@/stores'; -const shimmer = keyframes` - 0% { - background-position: -1000px 0; - } - 100% { - background-position: 1000px 0; - } -`; - -type SkeletonLineProps = Partial; - -type SkeletonCircleProps = Partial; +import { SkeletonCircle, SkeletonLine } from './SkeletionUI'; export const DocEditorSkeleton = () => { const { isDesktop } = useResponsiveStore(); - const { spacingsTokens, colorsTokens } = useCunninghamTheme(); - - const SkeletonLine = ({ $css, ...props }: SkeletonLineProps) => { - return ( - - ); - }; - - const SkeletonCircle = ({ $css, ...props }: SkeletonCircleProps) => { - return ( - - ); - }; + const { spacingsTokens } = useCunninghamTheme(); return ( <> diff --git a/src/frontend/apps/impress/src/features/skeletons/components/SkeletionUI.tsx b/src/frontend/apps/impress/src/features/skeletons/components/SkeletionUI.tsx new file mode 100644 index 00000000..49c58556 --- /dev/null +++ b/src/frontend/apps/impress/src/features/skeletons/components/SkeletionUI.tsx @@ -0,0 +1,65 @@ +import { css, keyframes } from 'styled-components'; + +import { Box, BoxType } from '@/components/Box'; +import { useCunninghamTheme } from '@/cunningham/useCunninghamTheme'; + +const shimmer = keyframes` + 0% { + background-position: -1000px 0; + } + 100% { + background-position: 1000px 0; + } +`; + +type SkeletonLineProps = Partial; + +type SkeletonCircleProps = Partial; + +export const SkeletonLine = ({ $css, ...props }: SkeletonLineProps) => { + const { colorsTokens } = useCunninghamTheme(); + + return ( + + ); +}; + +export const SkeletonCircle = ({ $css, ...props }: SkeletonCircleProps) => { + const { colorsTokens } = useCunninghamTheme(); + + return ( + + ); +}; diff --git a/src/frontend/apps/impress/src/features/skeletons/components/TreeSkeleton.tsx b/src/frontend/apps/impress/src/features/skeletons/components/TreeSkeleton.tsx new file mode 100644 index 00000000..656efd43 --- /dev/null +++ b/src/frontend/apps/impress/src/features/skeletons/components/TreeSkeleton.tsx @@ -0,0 +1,30 @@ +import { Box } from '@/components'; + +import { SkeletonLine } from './SkeletionUI'; + +export const TreeSkeleton = () => { + return ( + + + + + + + ); +};