feat: Lightsail + svg animation

packages/frontend/src/components/CreateRdsInstanceForm.tsx

@@ -11,8 +11,10 @@ import {
 } from "@/api/aws/ec2.api";
 import type { CloudProvider } from "@/types/cloud";
 import type { CloudResource } from "@/types/resource";
+import { DatabaseLaunchProgress } from "@/components/DatabaseLaunchProgress";
 
 const IDENTIFIER_PATTERN = /^(?!.*--)[a-z](?:[a-z0-9-]{0,61}[a-z0-9])?$/;
+const DATABASE_CREATION_MINIMUM_MS = 5_000;
 
 interface CreateRdsInstanceFormProps {
   cloud: CloudProvider;
@@ -70,8 +72,15 @@ export function CreateRdsInstanceForm({
   }
 
   const createMut = useMutation({
-    mutationFn: (values: Record<string, unknown>) =>
-      createCloudResource(cloud, "database", values),
+    mutationFn: async (values: Record<string, unknown>) => {
+      const startedAt = Date.now();
+      const created = await createCloudResource(cloud, "database", values);
+      const remaining = DATABASE_CREATION_MINIMUM_MS - (Date.now() - startedAt);
+      if (remaining > 0) {
+        await new Promise<void>((resolve) => setTimeout(resolve, remaining));
+      }
+      return created;
+    },
     onSuccess: (created) => {
       void qc.invalidateQueries({
         queryKey: ["cloud-resources", cloud, "database"],
@@ -300,6 +309,7 @@ export function CreateRdsInstanceForm({
       </label>
 
       {/* ── Actions ────────────────────────────────────────────────── */}
+      {createMut.isPending && <div className="launch-field--span"><DatabaseLaunchProgress name={dbInstanceIdentifier} description="Starting the database container and applying its configuration." /></div>}
       <div className="launch-form-actions">
         <button
           className="button"