From 538ce1f391d85c9e1fb6384a851b1d0210e82283 Mon Sep 17 00:00:00 2001 From: Arvin Xu Date: Wed, 25 Dec 2024 13:05:38 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20improve=20loading=20bra?= =?UTF-8?q?nd=20(#5165)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 测试 ppr * fix * fix loading on home * fix style * fix * fix * fix type * try to fix * fix * Delete src/app/(main)/chat/@session/loading.tsx * refactor * fix setting layout * fix loading style * fix import * Update loading.tsx * fix lint --- src/app/(main)/(mobile)/me/(home)/loading.tsx | 2 +- src/app/(main)/(mobile)/me/data/loading.tsx | 2 +- .../(main)/(mobile)/me/profile/loading.tsx | 2 +- .../(main)/(mobile)/me/settings/loading.tsx | 2 +- .../chat/(workspace)/@portal/default.tsx | 2 +- .../chat/(workspace)/@portal/loading.tsx | 2 +- src/app/(main)/chat/@session/default.tsx | 5 ++- src/app/(main)/chat/loading.tsx | 2 +- src/app/(main)/chat/settings/loading.tsx | 2 +- src/app/(main)/discover/loading.tsx | 2 +- src/app/(main)/files/loading.tsx | 24 +--------- src/app/(main)/profile/loading.tsx | 2 +- .../(main)/repos/[id]/evals/dataset/page.tsx | 2 +- .../repos/[id]/evals/evaluation/page.tsx | 2 +- src/app/(main)/settings/@category/default.tsx | 8 +++- .../settings/_layout/Desktop/SideBar.tsx | 2 +- src/app/(main)/settings/loading.tsx | 10 +---- src/app/loading/Client/Content.tsx | 2 +- src/app/loading/Server/Content.tsx | 2 +- .../BrandTextLoading/LobeChatText/SVG.tsx | 44 +++++++++++++++++++ .../BrandTextLoading/LobeChatText/index.tsx | 6 +++ .../BrandTextLoading/LobeChatText/style.css | 32 ++++++++++++++ .../Loading/BrandTextLoading/index.tsx | 11 +++++ .../{ => Loading}/CircleLoading/index.tsx | 0 .../{ => Loading}/FullscreenLoading/index.tsx | 0 .../{ => Loading}/SkeletonLoading/index.tsx | 2 +- .../FileViewer/Renderer/TXT/index.tsx | 2 +- .../Portal/FilePreview/Body/index.tsx | 2 +- .../Portal/Home/Body/Files/FileList/index.tsx | 2 +- src/features/Setting/Footer.tsx | 4 +- src/features/Setting/SettingContainer.tsx | 1 + 31 files changed, 129 insertions(+), 54 deletions(-) create mode 100644 src/components/Loading/BrandTextLoading/LobeChatText/SVG.tsx create mode 100644 src/components/Loading/BrandTextLoading/LobeChatText/index.tsx create mode 100644 src/components/Loading/BrandTextLoading/LobeChatText/style.css create mode 100644 src/components/Loading/BrandTextLoading/index.tsx rename src/components/{ => Loading}/CircleLoading/index.tsx (100%) rename src/components/{ => Loading}/FullscreenLoading/index.tsx (100%) rename src/components/{ => Loading}/SkeletonLoading/index.tsx (80%) diff --git a/src/app/(main)/(mobile)/me/(home)/loading.tsx b/src/app/(main)/(mobile)/me/(home)/loading.tsx index 5db1a97cc46ea..3849f753fd553 100644 --- a/src/app/(main)/(mobile)/me/(home)/loading.tsx +++ b/src/app/(main)/(mobile)/me/(home)/loading.tsx @@ -5,7 +5,7 @@ import { memo } from 'react'; import { Flexbox } from 'react-layout-kit'; import Divider from '@/components/Cell/Divider'; -import SkeletonLoading from '@/components/SkeletonLoading'; +import SkeletonLoading from '@/components/Loading/SkeletonLoading'; const Loading = memo(() => { return ( diff --git a/src/app/(main)/(mobile)/me/data/loading.tsx b/src/app/(main)/(mobile)/me/data/loading.tsx index b144171684686..d73434fcb685f 100644 --- a/src/app/(main)/(mobile)/me/data/loading.tsx +++ b/src/app/(main)/(mobile)/me/data/loading.tsx @@ -1,4 +1,4 @@ -import SkeletonLoading from '@/components/SkeletonLoading'; +import SkeletonLoading from '@/components/Loading/SkeletonLoading'; export default () => { return ; diff --git a/src/app/(main)/(mobile)/me/profile/loading.tsx b/src/app/(main)/(mobile)/me/profile/loading.tsx index b144171684686..d73434fcb685f 100644 --- a/src/app/(main)/(mobile)/me/profile/loading.tsx +++ b/src/app/(main)/(mobile)/me/profile/loading.tsx @@ -1,4 +1,4 @@ -import SkeletonLoading from '@/components/SkeletonLoading'; +import SkeletonLoading from '@/components/Loading/SkeletonLoading'; export default () => { return ; diff --git a/src/app/(main)/(mobile)/me/settings/loading.tsx b/src/app/(main)/(mobile)/me/settings/loading.tsx index b144171684686..d73434fcb685f 100644 --- a/src/app/(main)/(mobile)/me/settings/loading.tsx +++ b/src/app/(main)/(mobile)/me/settings/loading.tsx @@ -1,4 +1,4 @@ -import SkeletonLoading from '@/components/SkeletonLoading'; +import SkeletonLoading from '@/components/Loading/SkeletonLoading'; export default () => { return ; diff --git a/src/app/(main)/chat/(workspace)/@portal/default.tsx b/src/app/(main)/chat/(workspace)/@portal/default.tsx index d0ae671310220..4539bed10355b 100644 --- a/src/app/(main)/chat/(workspace)/@portal/default.tsx +++ b/src/app/(main)/chat/(workspace)/@portal/default.tsx @@ -1,6 +1,6 @@ import React, { Suspense, lazy } from 'react'; -import Loading from '@/components/CircleLoading'; +import Loading from '@/components/Loading/BrandTextLoading'; import { isMobileDevice } from '@/utils/server/responsive'; import Desktop from './_layout/Desktop'; diff --git a/src/app/(main)/chat/(workspace)/@portal/loading.tsx b/src/app/(main)/chat/(workspace)/@portal/loading.tsx index 22efdc4fff716..3ae0d871289dd 100644 --- a/src/app/(main)/chat/(workspace)/@portal/loading.tsx +++ b/src/app/(main)/chat/(workspace)/@portal/loading.tsx @@ -1,3 +1,3 @@ -import Loading from '@/components/CircleLoading'; +import Loading from '@/components/Loading/BrandTextLoading'; export default () => ; diff --git a/src/app/(main)/chat/@session/default.tsx b/src/app/(main)/chat/@session/default.tsx index a64533d6e17f6..42166f57889e5 100644 --- a/src/app/(main)/chat/@session/default.tsx +++ b/src/app/(main)/chat/@session/default.tsx @@ -1,5 +1,6 @@ import { Suspense, lazy } from 'react'; +import CircleLoading from '@/components/Loading/CircleLoading'; import ServerLayout from '@/components/server/ServerLayout'; import Desktop from './_layout/Desktop'; @@ -13,14 +14,14 @@ const Layout = ServerLayout({ Desktop, Mobile }); const Session = () => { return ( - <> + }> }> - + ); }; diff --git a/src/app/(main)/chat/loading.tsx b/src/app/(main)/chat/loading.tsx index 766e96b947593..44f5102947c35 100644 --- a/src/app/(main)/chat/loading.tsx +++ b/src/app/(main)/chat/loading.tsx @@ -1,3 +1,3 @@ -import CircleLoading from '@/components/CircleLoading'; +import CircleLoading from '@/components/Loading/BrandTextLoading'; export default () => ; diff --git a/src/app/(main)/chat/settings/loading.tsx b/src/app/(main)/chat/settings/loading.tsx index 9ca9c13ee77b6..eb6bf9a4a6d88 100644 --- a/src/app/(main)/chat/settings/loading.tsx +++ b/src/app/(main)/chat/settings/loading.tsx @@ -1,3 +1,3 @@ -import SkeletonLoading from '@/components/SkeletonLoading'; +import SkeletonLoading from '@/components/Loading/SkeletonLoading'; export default () => ; diff --git a/src/app/(main)/discover/loading.tsx b/src/app/(main)/discover/loading.tsx index e15b868ba6913..611cded27273b 100644 --- a/src/app/(main)/discover/loading.tsx +++ b/src/app/(main)/discover/loading.tsx @@ -1,6 +1,6 @@ import { Center } from 'react-layout-kit'; -import CircleLoading from '@/components/CircleLoading'; +import CircleLoading from '@/components/Loading/BrandTextLoading'; export default () => (
diff --git a/src/app/(main)/files/loading.tsx b/src/app/(main)/files/loading.tsx index cd2efe9a0548d..44f5102947c35 100644 --- a/src/app/(main)/files/loading.tsx +++ b/src/app/(main)/files/loading.tsx @@ -1,23 +1,3 @@ -'use client'; +import CircleLoading from '@/components/Loading/BrandTextLoading'; -import { Icon } from '@lobehub/ui'; -import { Typography } from 'antd'; -import { LoaderCircle } from 'lucide-react'; -import { useTranslation } from 'react-i18next'; -import { Center, Flexbox } from 'react-layout-kit'; - -export default () => { - const { t } = useTranslation('common'); - return ( -
- -
- -
- - {t('loading')} - - -
- ); -}; +export default () => ; diff --git a/src/app/(main)/profile/loading.tsx b/src/app/(main)/profile/loading.tsx index 3cc69a2bc8397..e7caee8aff5af 100644 --- a/src/app/(main)/profile/loading.tsx +++ b/src/app/(main)/profile/loading.tsx @@ -1,6 +1,6 @@ import { Flexbox } from 'react-layout-kit'; -import SkeletonLoading from '@/components/SkeletonLoading'; +import SkeletonLoading from '@/components/Loading/SkeletonLoading'; import { isMobileDevice } from '@/utils/server/responsive'; const Loading = async () => { diff --git a/src/app/(main)/repos/[id]/evals/dataset/page.tsx b/src/app/(main)/repos/[id]/evals/dataset/page.tsx index 7de4dd92ad792..bf5330b89c307 100644 --- a/src/app/(main)/repos/[id]/evals/dataset/page.tsx +++ b/src/app/(main)/repos/[id]/evals/dataset/page.tsx @@ -3,7 +3,7 @@ import { createStyles } from 'antd-style'; import { Flexbox } from 'react-layout-kit'; -import CircleLoading from '@/components/CircleLoading'; +import CircleLoading from '@/components/Loading/BrandTextLoading'; import { useKnowledgeBaseStore } from '@/store/knowledgeBase'; import DatasetDetail from './DatasetDetail'; diff --git a/src/app/(main)/repos/[id]/evals/evaluation/page.tsx b/src/app/(main)/repos/[id]/evals/evaluation/page.tsx index 9a661bac7da72..d93f2d59b6b02 100644 --- a/src/app/(main)/repos/[id]/evals/evaluation/page.tsx +++ b/src/app/(main)/repos/[id]/evals/evaluation/page.tsx @@ -2,7 +2,7 @@ import { Flexbox } from 'react-layout-kit'; -import CircleLoading from '@/components/CircleLoading'; +import CircleLoading from '@/components/Loading/BrandTextLoading'; import { useKnowledgeBaseStore } from '@/store/knowledgeBase'; import EmptyGuide from './EmptyGuide'; diff --git a/src/app/(main)/settings/@category/default.tsx b/src/app/(main)/settings/@category/default.tsx index eafd1d904b1a9..ad41181971430 100644 --- a/src/app/(main)/settings/@category/default.tsx +++ b/src/app/(main)/settings/@category/default.tsx @@ -1,12 +1,16 @@ +import { Suspense } from 'react'; + +import SkeletonLoading from '@/components/Loading/SkeletonLoading'; + import UpgradeAlert from '../features/UpgradeAlert'; import CategoryContent from './features/CategoryContent'; const Category = () => { return ( - <> + }> - + ); }; diff --git a/src/app/(main)/settings/_layout/Desktop/SideBar.tsx b/src/app/(main)/settings/_layout/Desktop/SideBar.tsx index 930843ed85bda..93d5782546e9f 100644 --- a/src/app/(main)/settings/_layout/Desktop/SideBar.tsx +++ b/src/app/(main)/settings/_layout/Desktop/SideBar.tsx @@ -33,7 +33,7 @@ const SidebarLayout = ({ children, className, title, desc, ...rest }: SidebarLay {...rest} > - {children} + {children} ); diff --git a/src/app/(main)/settings/loading.tsx b/src/app/(main)/settings/loading.tsx index 6a56336021978..2c93414921abd 100644 --- a/src/app/(main)/settings/loading.tsx +++ b/src/app/(main)/settings/loading.tsx @@ -1,9 +1,3 @@ -import SkeletonLoading from '@/components/SkeletonLoading'; +import FullLoading from '@/components/Loading/BrandTextLoading'; -export default () => { - return ( -
- -
- ); -}; +export default () => ; diff --git a/src/app/loading/Client/Content.tsx b/src/app/loading/Client/Content.tsx index d035707f6fd88..262ab7790ccde 100644 --- a/src/app/loading/Client/Content.tsx +++ b/src/app/loading/Client/Content.tsx @@ -2,7 +2,7 @@ import dynamic from 'next/dynamic'; import React, { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import FullscreenLoading from '@/components/FullscreenLoading'; +import FullscreenLoading from '@/components/Loading/FullscreenLoading'; import { useGlobalStore } from '@/store/global'; import { systemStatusSelectors } from '@/store/global/selectors'; import { DatabaseLoadingState } from '@/types/clientDB'; diff --git a/src/app/loading/Server/Content.tsx b/src/app/loading/Server/Content.tsx index 48df787de9978..42bc87432191f 100644 --- a/src/app/loading/Server/Content.tsx +++ b/src/app/loading/Server/Content.tsx @@ -1,7 +1,7 @@ import React, { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import FullscreenLoading from '@/components/FullscreenLoading'; +import FullscreenLoading from '@/components/Loading/FullscreenLoading'; import { AppLoadingStage, SERVER_LOADING_STAGES } from '../stage'; diff --git a/src/components/Loading/BrandTextLoading/LobeChatText/SVG.tsx b/src/components/Loading/BrandTextLoading/LobeChatText/SVG.tsx new file mode 100644 index 0000000000000..cec21559321bd --- /dev/null +++ b/src/components/Loading/BrandTextLoading/LobeChatText/SVG.tsx @@ -0,0 +1,44 @@ +import { memo } from 'react'; + +const LobeChatText = memo<{ size?: number }>(({ size = '1em' }) => ( + + LobeChat + + + + + + + + +)); + +export default LobeChatText; diff --git a/src/components/Loading/BrandTextLoading/LobeChatText/index.tsx b/src/components/Loading/BrandTextLoading/LobeChatText/index.tsx new file mode 100644 index 0000000000000..9fbf84d39b519 --- /dev/null +++ b/src/components/Loading/BrandTextLoading/LobeChatText/index.tsx @@ -0,0 +1,6 @@ +import LobeChatText from './SVG'; +import './style.css'; + +const LobeChatTextLoading = () => ; + +export default LobeChatTextLoading; diff --git a/src/components/Loading/BrandTextLoading/LobeChatText/style.css b/src/components/Loading/BrandTextLoading/LobeChatText/style.css new file mode 100644 index 0000000000000..f5d89566e4a98 --- /dev/null +++ b/src/components/Loading/BrandTextLoading/LobeChatText/style.css @@ -0,0 +1,32 @@ +@keyframes draw { + 0% { + stroke-dashoffset: 1000; + } + + 100% { + stroke-dashoffset: 0; + } +} + +@keyframes fill { + 30% { + fill-opacity: 0%; + } + + 100% { + fill-opacity: 100%; + } +} + +.animate-draw { + fill: currentcolor; + fill-opacity: 0%; + stroke: currentcolor; + stroke-dasharray: 1000; + stroke-dashoffset: 1000; + stroke-width: 1.5; + + animation: + draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite, + fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; +} diff --git a/src/components/Loading/BrandTextLoading/index.tsx b/src/components/Loading/BrandTextLoading/index.tsx new file mode 100644 index 0000000000000..9ae5fb6b87582 --- /dev/null +++ b/src/components/Loading/BrandTextLoading/index.tsx @@ -0,0 +1,11 @@ +import { Center } from 'react-layout-kit'; + +import LobeChatText from './LobeChatText'; + +export default () => { + return ( +
+ +
+ ); +}; diff --git a/src/components/CircleLoading/index.tsx b/src/components/Loading/CircleLoading/index.tsx similarity index 100% rename from src/components/CircleLoading/index.tsx rename to src/components/Loading/CircleLoading/index.tsx diff --git a/src/components/FullscreenLoading/index.tsx b/src/components/Loading/FullscreenLoading/index.tsx similarity index 100% rename from src/components/FullscreenLoading/index.tsx rename to src/components/Loading/FullscreenLoading/index.tsx diff --git a/src/components/SkeletonLoading/index.tsx b/src/components/Loading/SkeletonLoading/index.tsx similarity index 80% rename from src/components/SkeletonLoading/index.tsx rename to src/components/Loading/SkeletonLoading/index.tsx index a2a07e3c18a65..4e821ffcb6f21 100644 --- a/src/components/SkeletonLoading/index.tsx +++ b/src/components/Loading/SkeletonLoading/index.tsx @@ -15,7 +15,7 @@ const useStyles = createStyles( const SkeletonLoading = memo(({ className, ...rest }) => { const { cx, styles } = useStyles(); - return ; + return ; }); export default SkeletonLoading; diff --git a/src/features/FileViewer/Renderer/TXT/index.tsx b/src/features/FileViewer/Renderer/TXT/index.tsx index 9f71e7b7c8bcc..e4379d83ceff2 100644 --- a/src/features/FileViewer/Renderer/TXT/index.tsx +++ b/src/features/FileViewer/Renderer/TXT/index.tsx @@ -4,7 +4,7 @@ import { createStyles } from 'antd-style'; import React from 'react'; import { Center, Flexbox } from 'react-layout-kit'; -import CircleLoading from '@/components/CircleLoading'; +import CircleLoading from '@/components/Loading/CircleLoading'; const useStyles = createStyles(({ css, token }) => ({ page: css` diff --git a/src/features/Portal/FilePreview/Body/index.tsx b/src/features/Portal/FilePreview/Body/index.tsx index 29a601b1480cd..eec204896fd41 100644 --- a/src/features/Portal/FilePreview/Body/index.tsx +++ b/src/features/Portal/FilePreview/Body/index.tsx @@ -5,7 +5,7 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Flexbox } from 'react-layout-kit'; -import Loading from '@/components/CircleLoading'; +import Loading from '@/components/Loading/CircleLoading'; import FileViewer from '@/features/FileViewer'; import { useChatStore } from '@/store/chat'; import { chatPortalSelectors } from '@/store/chat/selectors'; diff --git a/src/features/Portal/Home/Body/Files/FileList/index.tsx b/src/features/Portal/Home/Body/Files/FileList/index.tsx index fed90e859b87e..3a87b9145d72a 100644 --- a/src/features/Portal/Home/Body/Files/FileList/index.tsx +++ b/src/features/Portal/Home/Body/Files/FileList/index.tsx @@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'; import { Center, Flexbox } from 'react-layout-kit'; import Balancer from 'react-wrap-balancer'; -import SkeletonLoading from '@/components/SkeletonLoading'; +import SkeletonLoading from '@/components/Loading/SkeletonLoading'; import { useChatStore } from '@/store/chat'; import { chatSelectors } from '@/store/chat/selectors'; diff --git a/src/features/Setting/Footer.tsx b/src/features/Setting/Footer.tsx index 4fbf57c0bd203..fad687ab3fe90 100644 --- a/src/features/Setting/Footer.tsx +++ b/src/features/Setting/Footer.tsx @@ -32,7 +32,7 @@ const Footer = memo(() => { return hideGitHub ? null : ( <> - +
(() => { ); }); +Footer.displayName = 'SettingFooter'; + export default Footer; diff --git a/src/features/Setting/SettingContainer.tsx b/src/features/Setting/SettingContainer.tsx index f1676849deeaf..2b205cc90ac8c 100644 --- a/src/features/Setting/SettingContainer.tsx +++ b/src/features/Setting/SettingContainer.tsx @@ -33,6 +33,7 @@ const SettingContainer = memo>( > {addonBefore}