feat: add skeleton loading in my deploypage

web/src/DeployPage.tsx

@@ -24,6 +24,7 @@ export default function DeployPage() {
   const [deploy, setDeploy] = useState<DeployDto | null>(null);
   const [server, setServer] = useState<ServerDto | null>(null);
   const [services, setServices] = useState<Service[]>([]);
+  const [loadingNewService, setLoadingNewService] = useState(false);
 
   async function fetchDeployById(id: string) {
     const res = await getDeployByIdApi(id);
@@ -79,11 +80,13 @@ export default function DeployPage() {
         <TabsContent value="database-service">
           <AddService
             deployId={deploy.id}
+            setLoading={setLoadingNewService}
             fetchServiceList={fetchServiceList}
           />
           <ServiceListDeploy
             deployId={deploy.id}
             services={services}
+            loadingNewService={loadingNewService}
             fetchServiceList={fetchServiceList}
           />
         </TabsContent>

web/src/components/AddServices.tsx

@@ -17,12 +17,14 @@ import { createServiceApi } from "@/services/createServiceApi";
 
 type AddServiceProps = {
   deployId: string;
+  setLoading: (loading: boolean) => void;
   fetchServiceList: (deployId: string) => Promise<void>;
 };
 
 export default function AddService({
   deployId,
   fetchServiceList,
+  setLoading,
 }: AddServiceProps) {
   const [services, setServices] = useState<Array<ServiceDto>>([]);
   const [open, setOpen] = useState(false);
@@ -46,12 +48,14 @@ export default function AddService({
 
   async function createService(serviceName: string) {
     try {
+      setLoading(true);
       setOpen(false);
       await createServiceApi(serviceName, deployId);
       await fetchServiceList(deployId);
     } catch (e) {
       console.error(e);
     }
+    setLoading(false);
   }
 
   return (
@@ -81,6 +85,7 @@ export default function AddService({
             {services.map((s) => (
               <DatabaseCard key={s.name} service={s} onSelect={createService} />
             ))}
+            {/* TODO: command item to add new service link to github issue template */}
           </CommandGroup>
         </CommandList>
       </CommandDialog>

web/src/components/ServiceListDeploy.tsx

@@ -11,16 +11,19 @@ import {
 } from "./ui/dialog";
 import { deleteServiceApi } from "@/services/deleteServiceApi";
 import { DialogTitle } from "@radix-ui/react-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
 
 type ServiceListDeployProps = {
   deployId: string;
   services: Service[];
+  loadingNewService: boolean;
   fetchServiceList: (deployId: string) => Promise<void>;
 };
 
 export default function ServiceListDeploy({
   deployId,
   services,
+  loadingNewService,
   fetchServiceList,
 }: ServiceListDeployProps) {
   const [serviceToDelete, setServiceToDelete] = useState<Service | null>(null);
@@ -38,7 +41,7 @@ export default function ServiceListDeploy({
 
   useEffect(() => {
     fetchServiceList(deployId);
-  }, [deployId, fetchServiceList]);
+  }, [deployId]);
 
   return (
     <div className="flex flex-col">
@@ -73,7 +76,7 @@ export default function ServiceListDeploy({
         </DialogContent>
       </Dialog>
       {services.map((s) => (
-        <Card className="flex justify-between p-3">
+        <Card className="flex justify-between p-3 mb-3 h-24">
           <div className="flex flex-col gap-3">
             <div className="flex items-center gap-5">
               <div className="text-xl font-bold">{s.name}</div>
@@ -88,6 +91,17 @@ export default function ServiceListDeploy({
           </div>
         </Card>
       ))}
+      {loadingNewService && (
+        <Card className="flex justify-between p-3 h-24">
+          <div className="flex flex-col gap-3 w-full">
+            <div className="flex justify-between">
+              <Skeleton className="w-44 h-6" />
+              <Skeleton className="w-24 h-10" />
+            </div>
+            <Skeleton className="w-20 h-3" />
+          </div>
+        </Card>
+      )}
     </div>
   );
 }

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }