Split framework loading in 2 query

Signed-off-by: Bryan Frimin <bryan@getprobo.com>

apps/console/src/components/skeletons/ControlSkeleton.tsx

@@ -0,0 +1,26 @@
+import { ActionDropdown, Skeleton } from "@probo/ui";
+import { Button, IconPencil } from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+
+/**
+ * Skeleton state for the framework control panel
+ */
+export function ControlSkeleton() {
+  const { __ } = useTranslate();
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between">
+        <Skeleton style={{ width: 72, height: 34 }} className="mb-3" />
+        <div className="flex gap-2">
+          <Button icon={IconPencil} variant="secondary" disabled>
+            {__("Edit control")}
+          </Button>
+          <ActionDropdown variant="secondary" />
+        </div>
+      </div>
+      <Skeleton style={{ width: "80%", height: 24 }} />
+      <Skeleton style={{ height: 160 }} />
+      <Skeleton style={{ height: 160 }} />
+    </div>
+  );
+}

apps/console/src/components/skeletons/LinkCardSkeleton.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "@probo/ui";
+
+export function LinkCardSkeleton() {
+  return <Skeleton style={{ height: 125 }} className="rounded-2xl" />;
+}