refactor(client): qr dialog skeleton

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/src/components/checkin/qr-dialog.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -14,9 +15,9 @@ import { Button } from '../ui/button';
 export function QrDialog(
   { eventId }: { eventId: string },
 ) {
-  const { data } = useCheckinCode(eventId);
+  const [open, setOpen] = useState(false);
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button className="w-20">签到</Button>
       </DialogTrigger>
@@ -27,21 +28,41 @@ export function QrDialog(
             请工作人员扫描下面的二维码为你签到。
           </DialogDescription>
         </DialogHeader>
-        <QrDialogContent checkinCode={data.data.checkin_code} />
+        <QrSection eventId={eventId} enabled={open} />
       </DialogContent>
     </Dialog>
   );
 }
 
-function QrDialogContent({ checkinCode }: { checkinCode: string }) {
+function QrSection({ eventId, enabled }: { eventId: string; enabled: boolean }) {
+  const { data } = useCheckinCode(eventId, enabled);
+  return data
+    ? (
+      <>
+        <div className="border-2 px-4 py-8 border-muted rounded-xl flex flex-col items-center justify-center p-4">
+          <QRCode data={data.data.checkin_code} className="size-60" />
+        </div>
+        <DialogFooter>
+          <div className="flex flex-1 items-center ml-2 font-mono text-3xl tracking-widest text-primary/80 justify-center">
+            {data.data.checkin_code}
+          </div>
+        </DialogFooter>
+      </>
+    )
+    : (
+      <QrSectionSkeleton />
+    );
+}
+
+function QrSectionSkeleton() {
   return (
     <>
       <div className="border-2 px-4 py-8 border-muted rounded-xl flex flex-col items-center justify-center p-4">
-        <QRCode data={checkinCode} className="size-60" />
+        <QRCode data="114514" className="size-60 blur-xs" />
       </div>
       <DialogFooter>
         <div className="flex flex-1 items-center ml-2 font-mono text-3xl tracking-widest text-primary/80 justify-center">
-          {checkinCode}
+          Loading...
         </div>
       </DialogFooter>
     </>

client/src/hooks/data/useGetCheckInCode.ts

@@ -1,8 +1,8 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { axiosClient } from '@/lib/axios';
 
-export function useCheckinCode(eventId: string) {
+export function useCheckinCode(eventId: string, enabled: boolean) {
-  return useSuspenseQuery({
+  return useQuery({
     queryKey: ['getCheckinCode', eventId],
     queryFn: async () => {
       return axiosClient.get<{
@@ -13,5 +13,6 @@ export function useCheckinCode(eventId: string) {
         },
       });
     },
+    enabled,
   });
 }