diff --git a/src/app/(main)/(mobile)/me/(home)/loading.tsx b/src/app/(main)/(mobile)/me/(home)/loading.tsx index 5db1a97cc46e..3849f753fd55 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 b14417168468..d73434fcb685 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 b14417168468..d73434fcb685 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 b14417168468..d73434fcb685 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 d0ae67131022..4539bed10355 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 22efdc4fff71..3ae0d871289d 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 a64533d6e17f..42166f57889e 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 766e96b94759..44f5102947c3 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 9ca9c13ee77b..eb6bf9a4a6d8 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 e15b868ba691..611cded27273 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 cd2efe9a0548..44f5102947c3 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 3cc69a2bc839..e7caee8aff5a 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 7de4dd92ad79..bf5330b89c30 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 9a661bac7da7..d93f2d59b6b0 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 eafd1d904b1a..ad4118197143 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 930843ed85bd..93d5782546e9 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 6a5633602197..2c93414921ab 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 d035707f6fd8..262ab7790ccd 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 48df787de997..42bc87432191 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 000000000000..cec21559321b --- /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 000000000000..9fbf84d39b51 --- /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 000000000000..f5d89566e4a9 --- /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 000000000000..9ae5fb6b8758 --- /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 a2a07e3c18a6..4e821ffcb6f2 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 9f71e7b7c8bc..e4379d83ceff 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 29a601b1480c..eec204896fd4 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 fed90e859b87..3a87b9145d72 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 4fbf57c0bd20..fad687ab3fe9 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 f1676849deea..2b205cc90ac8 100644 --- a/src/features/Setting/SettingContainer.tsx +++ b/src/features/Setting/SettingContainer.tsx @@ -33,6 +33,7 @@ const SettingContainer = memo>( > {addonBefore}