feat: add the opening lottie (#180)

首次进入网站硬控看完猫猫跳，session级别缓存
petercat-ai · Jul 5, 2024 · c882ad1 · c882ad1
2 parents a9f8b0e + b0e3341
commit c882ad1
Show file tree

Hide file tree

Showing 9 changed files with 28,248 additions and 7,894 deletions.
diff --git 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 <FullPageSkeleton />;
   }

diff --git 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,35 +18,55 @@ 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<string>('');
-  let { data: bots, isLoading, error } = useBotList(false, search);
+  const { data: bots, isLoading, error } = useBotList(false, search);
+  const [userInfo, setUserInfo] = useState<string | null>(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 <FullPageSkeleton />;
-  }
-  if (error) {
-    return <div>Error loading bots!{error.message}</div>;
-  }
   const handleCardClick = (id: string) => {
     setVisible(true);
     setCurrentBot(id);
   };
 
-  const onClose = () => {
-    setVisible(false);
-  };
+  const onClose = () => setVisible(false);
+
+  if (isOpening) {
+    return (
+      <FullPageSkeleton type="OPENING" onComplete={() => setComplete(true)} />
+    );
+  }
+
+  if (isLoading) {
+    return <FullPageSkeleton />;
+  }
+
+  if (error) {
+    return <div>Error loading bots! {error.message}</div>;
+  }
 
   return (
     <div>
       <div className="grid grid-flow-row-dense gap-8 justify-items-center px-[40px] grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
         <BotList type="list" />
         {!isEmpty(bots) &&
           map(bots, (bot: Bot) => (
-            <BotCard
-              key={bot.id}
-              bot={bot}
-              handleCardClick={handleCardClick}
-            />
+            <BotCard key={bot.id} bot={bot} handleCardClick={handleCardClick} />
           ))}
       </div>
       <Assistant

diff --git a/client/components/BotInfoCard.tsx b/client/components/BotInfoCard.tsx
@@ -1,5 +1,5 @@
-import { Tables } from '@/types/database.types';
-import { Avatar, Chip, Skeleton } from '@nextui-org/react';
+'use client';
+import { Avatar, Chip } from '@nextui-org/react';
 import { Dispatch, SetStateAction } from 'react';
 import { map } from 'lodash';
 

diff --git a/client/components/FullPageSkeleton.tsx b/client/components/FullPageSkeleton.tsx
@@ -1,18 +1,30 @@
 'use client';
 import dynamic from 'next/dynamic';
-
-import peterCatWalkAnimation from '../public/loading.json';
+import Walk from '../public/loading.json';
+import WalkJump from '../public/opening.json';
 
 const Lottie = dynamic(() => 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 (
     <div className="fixed top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center bg-white bg-opacity-75">
       <Lottie
         loop={true}
         autoplay={true}
-        animationData={peterCatWalkAnimation}
-        style={{ width: '50%', height: '50%' }}
+        animationData={SKELETON_MAP[type]}
+        onLoopComplete={onComplete}
+        style={{ width: '25%', height: '25%' }}
       />
     </div>
   );

diff --git a/client/components/User.tsx b/client/components/User.tsx
@@ -1,14 +1,14 @@
 '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';
 
 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 (
       <Button
         onPress={() => router.push(`${apiDomain}/api/auth/login`)}
@@ -20,7 +20,13 @@ export default function Profile() {
     );
   }
 
-  return (<Avatar src={user.picture!} alt={user.name!} classNames={{
-    icon: "w-[40px] h-[40px]",
-  }}/>);
+  return (
+    <Avatar
+      src={user.picture!}
+      alt={user.name!}
+      classNames={{
+        icon: 'w-[40px] h-[40px]',
+      }}
+    />
+  );
 }