@kyro-cms/admin 0.10.3 → 0.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "engines": {
     "node": ">=22"
   },

package/src/components/AutoForm.tsx

@@ -18,7 +18,8 @@ import { MarkdownField } from "./fields/MarkdownField";
 import TextField from "./fields/TextField";
 import { globals, collections } from "../lib/config";
 import { slugifyText } from "../lib/slugify";
-import { resolveUrl, apiDelete, fetchWithAuth } from "../lib/api";
+import { resolveUrl, apiGet, apiDelete, fetchWithAuth } from "../lib/api";
+import { Shimmer } from "./ui/Shimmer";
 import { normalizeUploadFields } from "../lib/normalize-upload-fields";
 import { useAutoFormStore } from "../lib/autoform-store";
 import { useAutoFormState } from "../hooks/useAutoFormState";
@@ -47,6 +48,7 @@ interface AutoFormProps {
   disabled?: boolean;
   collectionSlug?: string;
   globalSlug?: string;
+  documentId?: string;
   documentName?: string;
   layout?: "split" | "single";
   onActionSuccess?: (message: string) => void;
@@ -63,6 +65,7 @@ export function AutoForm({
   disabled: propDisabled,
   collectionSlug,
   globalSlug,
+  documentId,
   documentName,
   layout = "split",
   onActionSuccess,
@@ -143,6 +146,30 @@ export function AutoForm({
   const [localSaveStatus, setLocalSaveStatus] = useState<"idle" | "saving" | "saved" | "error">("idle");
   const [now, setNow] = useState(Date.now());
   const disabled = propDisabled;
+  const [clientLoading, setClientLoading] = useState(false);
+
+  // Client-side fetch when SSR didn't provide data
+  useEffect(() => {
+    const shouldFetchCollection = collectionSlug && documentId && documentId !== "new";
+    const shouldFetchGlobal = globalSlug;
+    if (!shouldFetchCollection && !shouldFetchGlobal) return;
+    if (initialData && Object.keys(initialData).length > 0) return;
+
+    setClientLoading(true);
+    const url = globalSlug
+      ? `/api/globals/${globalSlug}`
+      : `/api/${collectionSlug}/${documentId}`;
+
+    apiGet<{ data?: Record<string, unknown> }>(url, { autoToast: false })
+      .then((result) => {
+        const docData = result.data || {};
+        setFormData(docData);
+        setClientLoading(false);
+      })
+      .catch(() => {
+        setClientLoading(false);
+      });
+  }, [collectionSlug, documentId, globalSlug, initialData]);
 
   // Tick every 10s so the "saved X ago" label stays fresh
   useEffect(() => {
@@ -1807,6 +1834,20 @@ export function AutoForm({
     </div>
   );
 
+  if (clientLoading) {
+    return (
+      <div className="space-y-6 p-4">
+        <div className="space-y-2">
+          <Shimmer variant="text" className="w-1/3" />
+          <Shimmer variant="text" className="w-2/3" />
+        </div>
+        <div className="space-y-4">
+          <Shimmer variant="rect" count={4} />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full">
       {layout !== "single" && renderHeader()}

package/src/pages/[collection]/[id].astro

@@ -2,11 +2,10 @@
 import AdminLayout from "../../layouts/AdminLayout.astro";
 import { collections } from "../../lib/config";
 import { AutoForm } from "../../components/AutoForm";
+import { adminPath } from "../../lib/paths";
 
 const { collection, id } = Astro.params;
 
-import { adminPath, apiPath } from "../../lib/paths";
-
 // Validate collection exists
 if (!collection || !collections[collection]) {
   return Astro.redirect(adminPath);
@@ -14,39 +13,10 @@ if (!collection || !collections[collection]) {
 
 const config = collections[collection];
 
-// Fetch document if editing
-let doc: any = null;
-let fetchError: string | null = null;
-if (id && id !== "new") {
-  try {
-    const response = await fetch(
-      `${Astro.url.origin}${apiPath}/${collection}/${id}`,
-      {
-        headers: Astro.request.headers,
-        credentials: "include",
-      },
-    );
-    if (response.ok) {
-      const result = await response.json();
-      doc = result.data || null;
-    } else {
-      const errorData = await response.json().catch(() => ({}));
-      fetchError = errorData.error || `Failed to load document (${response.status})`;
-    }
-  } catch (error) {
-    fetchError = "Failed to fetch document. Check server connection.";
-    console.error("Failed to fetch document:", error);
-  }
-}
-
-const isNew = !doc;
-const docStatus = doc?.status || "draft";
+const isNew = !id || id === "new";
 const title = isNew
   ? `Create ${config.singularLabel || config.label || collection}`
   : `Edit ${config.singularLabel || config.label || collection}`;
-const description =
-  config.admin?.description ||
-  `Manage ${(config.label || collection || "").toLowerCase()} documents`;
 ---
 
 <AdminLayout title={title}>
@@ -55,10 +25,8 @@ const description =
       <AutoForm
         client:load
         config={config}
-        data={doc || {}}
         collectionSlug={collection}
         documentId={id || undefined}
-        documentName={(typeof doc?.title === "object" ? "" : doc?.title) || (typeof doc?.name === "object" ? "" : doc?.name) || doc?.slug || "new-document"}
       />
       <input type="hidden" id="form-data" name="form-data" value="{}" />
     </form>

package/src/pages/settings/[slug].astro

@@ -3,7 +3,7 @@ import AdminLayout from "../../layouts/AdminLayout.astro";
 import { globals } from "../../lib/config";
 import { SettingsPage } from "../../components/SettingsPage";
 
-import { adminPath, apiPath } from "../../lib/paths";
+import { adminPath } from "../../lib/paths";
 
 const { slug } = Astro.params;
 
@@ -15,29 +15,6 @@ if (!slug || !globals[slug]) {
 const config = globals[slug];
 const hasVersioning = !!config.versions;
 
-// Fetch current settings data from API (authenticated)
-let data: any = {};
-try {
-  const fetchUrl = new URL(`${apiPath}/globals/${slug}`, Astro.url.origin);
-  if (hasVersioning) {
-    fetchUrl.searchParams.set("draft", "true");
-  }
-  
-  const response = await fetch(
-    fetchUrl.toString(),
-    {
-      headers: Astro.request.headers,
-      credentials: "include",
-    },
-  );
-  if (response.ok) {
-    const result = await response.json();
-    data = result.data || {};
-  }
-} catch (error) {
-  console.error("Failed to fetch settings:", error);
-}
-
 const activeSlug = slug;
 const allGlobals = Object.values(globals);
 
@@ -116,7 +93,6 @@ const description =
           client:load
           config={config}
           globalSlug={slug}
-          data={data}
           layout={hasVersioning ? "split" : "single"}
         />
         <input type="hidden" id="form-data" name="form-data" value="{}" />