diff --git a/client/app/factory/list/page.tsx b/client/app/factory/list/page.tsx index 8fc7d461..f8cda1cb 100644 --- a/client/app/factory/list/page.tsx +++ b/client/app/factory/list/page.tsx @@ -15,6 +15,7 @@ declare type Bot = Tables<'bots'>; export default function List() { const { search } = useSearch(); let { data: bots, isLoading, error } = useBotList(true, search); + if (isLoading) { return ; } diff --git a/client/app/page.tsx b/client/app/page.tsx index f093793d..57df6148 100644 --- a/client/app/page.tsx +++ b/client/app/page.tsx @@ -1,15 +1,15 @@ 'use client'; +import React, { useEffect, useMemo, useState } from 'react'; import { Tables } from '@/types/database.types'; -import React, { useEffect, useState } from 'react'; import { isEmpty, map } from 'lodash'; import BotCard from '@/components/BotCard'; import { useBotList } from '@/app/hooks/useBot'; import FullPageSkeleton from '@/components/FullPageSkeleton'; -import BotList from '../components/BotList'; +import BotList from '@/components/BotList'; import { useSearch } from '@/app/contexts/SearchContext'; import { Assistant } from 'petercat-lui'; - import 'petercat-lui/dist/style/global.css'; +import { useFingerprint } from './hooks/useFingerprint'; declare type Bot = Tables<'bots'>; @@ -18,23 +18,47 @@ const ASSISTANT_API_HOST = process.env.NEXT_PUBLIC_API_DOMAIN; export default function Home() { const { search } = useSearch(); const [visible, setVisible] = useState(false); + const [isComplete, setComplete] = useState(false); const [currentBot, setCurrentBot] = useState(''); - let { data: bots, isLoading, error } = useBotList(false, search); + const { data: bots, isLoading, error } = useBotList(false, search); + const [userInfo, setUserInfo] = useState(null); + const { data } = useFingerprint(); + + useEffect(() => { + setUserInfo(sessionStorage.getItem('userInfo')); + }, []); + + const isOpening = useMemo( + () => !userInfo && (isLoading || !isComplete), + [isComplete, isLoading, userInfo], + ); + + useEffect(() => { + if (data) { + sessionStorage.setItem('userInfo', JSON.stringify(data?.visitorId)); + } + }, [data]); - if (isLoading) { - return ; - } - if (error) { - return
Error loading bots!{error.message}
; - } const handleCardClick = (id: string) => { setVisible(true); setCurrentBot(id); }; - const onClose = () => { - setVisible(false); - }; + const onClose = () => setVisible(false); + + if (isOpening) { + return ( + setComplete(true)} /> + ); + } + + if (isLoading) { + return ; + } + + if (error) { + return
Error loading bots! {error.message}
; + } return (
@@ -42,11 +66,7 @@ export default function Home() { {!isEmpty(bots) && map(bots, (bot: Bot) => ( - + ))}
import('lottie-react'), { ssr: false }); -const FullPageSkeleton = () => { +export const SKELETON_MAP = { + LOADING: Walk, + OPENING: WalkJump, +}; + +export interface FullPageSkeletonProps { + type?: 'LOADING' | 'OPENING'; + onComplete?: () => void; +} + +const FullPageSkeleton = (props: FullPageSkeletonProps) => { + const { type = 'LOADING', onComplete } = props; return (
); diff --git a/client/components/User.tsx b/client/components/User.tsx index 5334c28d..24e37783 100644 --- a/client/components/User.tsx +++ b/client/components/User.tsx @@ -1,6 +1,6 @@ 'use client'; import { useRouter } from 'next/navigation'; -import { Avatar, Button, Link } from '@nextui-org/react'; +import { Avatar, Button } from '@nextui-org/react'; import useUser from '../app/hooks/useUser'; import { LoginIcon } from '@/public/icons/LoginIcon'; @@ -8,7 +8,7 @@ export default function Profile() { const router = useRouter(); const { data: user, status } = useUser(); const apiDomain = process.env.NEXT_PUBLIC_API_DOMAIN; - if (!user || status !== "success") { + if (!user || status !== 'success') { return (