feat: add loader skeleton for rich text field (#530)

* feat: add loader skeleton for rich text field

* fix corepack on CI

.changeset/silver-emus-hammer.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+feat: add loader skeleton for rich text (#462)

.github/workflows/check-changeset.yml

@@ -12,7 +12,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Enable corepack
-        run: corepack enable
+        run: corepack enable && corepack prepare [email protected] --activate
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:

.github/workflows/e2e.yml

@@ -10,7 +10,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Enable corepack
-        run: corepack enable
+        run: corepack enable && corepack prepare [email protected] --activate
       - uses: actions/setup-node@v3
         with:
           node-version: 20
@@ -43,7 +43,7 @@ jobs:
       - name: Run tests
         run: |
           pnpm test
-          pnpm turbo test:e2e 
+          pnpm turbo test:e2e
           cd apps/example && pnpm prisma db seed && cd -
           BASE_URL=http://localhost:3000/pagerouter/admin pnpm test:e2e
       - uses: actions/upload-artifact@v4

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Enable corepack
-        run: corepack enable
+        run: corepack enable && corepack prepare [email protected] --activate
 
       - name: Setup Node.js
         uses: actions/setup-node@v3

.github/workflows/reset-database.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v2
       - name: Enable corepack
-        run: corepack enable
+        run: corepack enable && corepack prepare [email protected] --activate
       - name: Install dependencies
         run: pnpm install
       - name: Reset database

.github/workflows/vercel-deploy.yml

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Enable corepack
-        run: corepack enable
+        run: corepack enable && corepack prepare [email protected] --activate
 
       - name: Setup Node.js
         uses: actions/setup-node@v3

packages/next-admin/src/components/Form.tsx

@@ -12,7 +12,7 @@ import {
   FieldTemplateProps,
   getSubmitButtonOptions,
   ObjectFieldTemplateProps,
-  SubmitButtonProps
+  SubmitButtonProps,
 } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 import clsx from "clsx";
@@ -26,7 +26,7 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState
+  useState,
 } from "react";
 import { twMerge } from "tailwind-merge";
 import ClientActionDialogProvider from "../context/ClientActionDialogContext";
@@ -70,6 +70,7 @@ import {
 
 const RichTextField = dynamic(() => import("./inputs/RichText/RichTextField"), {
   ssr: false,
+  loading: () => <div className="h-48 animate-pulse rounded bg-gray-500" />,
 });
 
 const widgets: RjsfForm["props"]["widgets"] = {
@@ -307,12 +308,14 @@ const Form = ({
 
   const fields: RjsfForm["props"]["fields"] = {
     ArrayField: (props: FieldProps) => {
-      const customInput = customInputs?.[props.name as Field<ModelName>]
-      const improvedCustomInput = customInput ? cloneElement(customInput, {
-        ...customInput.props,
-        mode: edit ? "edit" : "create",
-      }) : undefined;
-      return ArrayField({ ...props, customInput: improvedCustomInput })
+      const customInput = customInputs?.[props.name as Field<ModelName>];
+      const improvedCustomInput = customInput
+        ? cloneElement(customInput, {
+            ...customInput.props,
+            mode: edit ? "edit" : "create",
+          })
+        : undefined;
+      return ArrayField({ ...props, customInput: improvedCustomInput });
     },
     NullField,
   };