form-craft-package 1.8.2-dev.0 → 1.8.2-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.8.2-dev.0",
+  "version": "1.8.2-dev.2",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/company-logo.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+
+export default function CompanyLogoSection({
+  location = LogoLocationEnum.Authenticated,
+  logoUrl,
+  isPreview,
+}: {
+  location?: LogoLocationEnum
+  logoUrl?: string
+  isPreview?: boolean
+}) {
+  const [logoFailed, setLogoFailed] = useState(false)
+
+  if (!logoUrl || logoFailed)
+    return (
+      <div className="w-full py-1.5 rounded-md flex items-center justify-center text-danger italic text-lg font-bold">
+        [Company Logo]
+      </div>
+    )
+
+  const imgClassName =
+    location === LogoLocationEnum.Authenticated
+      ? 'w-auto h-auto max-w-[140px] sm:max-w-[160px] md:max-w-[180px] lg:max-w-[200px] xl:max-w-[220px]'
+      : 'h-10 object-contain'
+
+  return (
+    <img
+      alt="Logo"
+      src={logoUrl}
+      style={{ maxWidth: isPreview ? '200px' : undefined }}
+      className={imgClassName}
+      onError={() => setLogoFailed(true)}
+    />
+  )
+}
+
+export enum LogoLocationEnum {
+  Authenticated,
+  Unauthenticated,
+}

package/src/components/common/custom-hooks/index.ts

@@ -3,3 +3,4 @@ export * from './use-notification.hook'
 export * from './use-lazy-modal-opener.hook'
 export * from './use-breadcrumb.hook'
 export * from './use-dayjs-extender.hook'
+export * from './use-set-persistent-domain.hook'

package/src/components/common/custom-hooks/use-login-handler.ts

@@ -1,12 +1,12 @@
 import { useReducer, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import client, { auth } from '../../../api/client'
-import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import { cookieHandler } from '../../../functions/cookie-handler'
 import { message } from 'antd'
+import { getLocalStorageDomain } from '../../../functions'
 export function useLoginHandler() {
   const navigate = useNavigate()
-  const domain = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain) || ''
+  const domain = getLocalStorageDomain()
   const [loading, updateLoading] = useReducer((currState: any, updated: any) => ({ ...currState, ...updated }), {
     login: false,
   })
@@ -27,7 +27,7 @@ export function useLoginHandler() {
     const { authRes, initialPath } = await auth(
       values.email,
       values.password,
-      localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain) ?? '',
+      getLocalStorageDomain(),
       values.type || 'password',
     )
     if (authRes.status === 200) {

package/src/components/common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook.ts

@@ -1,8 +1,9 @@
-import { useEffect, useCallback } from 'react'
+import { useEffect } from 'react'
 import useGetCurrentBreakpoint from '../use-window-width.hook'
 import { DeviceBreakpointEnum, FormElementConditionalKeyEnum } from '../../../../enums'
 import { disabledStore } from './visibility-store'
 import { isValidationsMet } from './visibility-utils'
+import { FormInstance } from 'antd'
 import {
   IDndLayoutElement,
   IDndLayoutRow,
@@ -12,16 +13,64 @@ import {
 
 export function useSetDisabledElements(
   layoutConfig?: IDndLayoutStructure_Responsive,
-  formValues?: { [key: string]: any },
+  formDataRef?: FormInstance,
   formDataId?: string,
 ): void {
   const currentBreakpoint = useGetCurrentBreakpoint()
+
+  useEffect(() => {
+    // during the initial renders, handle the initially disabled fields
+    if (!formDataRef) return
+
+    const allValues = formDataRef.getFieldsValue()
+
+    const layout: IDndLayoutRow[] =
+      layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
+    const elementsMap: Record<string, IDndLayoutElement> = layoutConfig?.elements || {}
+    const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
+      (acc, el) => {
+        const elConditions = el.conditions?.[FormElementConditionalKeyEnum.EnableIf]
+        if (elConditions && Array.isArray(elConditions) && elConditions.length > 0) acc[el.key] = el.conditions!
+
+        return acc
+      },
+      {} as Record<string, IFormLayoutElementConditions>,
+    )
+
+    const allInputsLoaded =
+      layout.length > 0 &&
+      Object.keys(elementsMap).length > 0 &&
+      Object.keys(configsPerElement).length > 0 &&
+      Object.values(allValues).filter(Boolean).length > 0
+
+    if (!allInputsLoaded) return
+
+    handleDisabledSet(allValues, currentBreakpoint, layoutConfig, formDataId)
+  }, [formDataRef, layoutConfig, currentBreakpoint, formDataId])
+}
+
+export function handleDisabledSet(
+  allValues: Record<string, any>,
+  currentBreakpoint: DeviceBreakpointEnum,
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formDataId?: string,
+) {
+  const disabledSet = computeDisabledSet(allValues, currentBreakpoint, layoutConfig, formDataId)
+  disabledStore.setIds([...disabledSet])
+}
+
+function computeDisabledSet(
+  allValues: Record<string, any>,
+  currentBreakpoint: DeviceBreakpointEnum,
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formDataId?: string,
+): Set<string> {
   const layout: IDndLayoutRow[] =
     layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
 
   const elementsMap: Record<string, IDndLayoutElement> = layoutConfig?.elements || {}
-  const dataValues: { [key: string]: any } = formValues && typeof formValues === 'object' ? formValues : {}
 
+  // Pull out only those elements which have EnableIf conditions
   const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
     (acc, el) => {
       const elConditions = el.conditions?.[FormElementConditionalKeyEnum.EnableIf]
@@ -36,29 +85,20 @@ export function useSetDisabledElements(
     layout.length > 0 &&
     Object.keys(elementsMap).length > 0 &&
     Object.keys(configsPerElement).length > 0 &&
-    Object.values(dataValues).length > 0 &&
+    Object.values(allValues).length > 0 &&
     !!formDataId
 
-  const computeIndividuallyDisabled = useCallback((): Set<string> => {
-    if (!allInputsLoaded) return new Set()
-
-    const disabledSet = new Set<string>()
-    Object.values(elementsMap).forEach(({ key }) => {
-      const elementConfigs = configsPerElement[key]
-      const shouldEnable = isValidationsMet(FormElementConditionalKeyEnum.EnableIf, dataValues, elementConfigs, {
+  const disabled = new Set<string>()
+  if (allInputsLoaded) {
+    for (const el of Object.values(elementsMap)) {
+      const conds = configsPerElement[el.key]
+      const shouldEnable = isValidationsMet(FormElementConditionalKeyEnum.EnableIf, allValues, conds, {
         currentBreakpoint,
         formDataId,
       })
+      if (!shouldEnable) disabled.add(el.key)
+    }
+  }
 
-      if (!shouldEnable) disabledSet.add(key)
-    })
-
-    return disabledSet
-  }, [elementsMap, dataValues, configsPerElement, currentBreakpoint, formDataId, allInputsLoaded])
-
-  const individuallyDisabled = computeIndividuallyDisabled()
-
-  useEffect(() => {
-    if (allInputsLoaded) disabledStore.setIds([...individuallyDisabled])
-  }, [allInputsLoaded, individuallyDisabled])
+  return disabled
 }

package/src/components/common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook.ts

@@ -1,16 +1,49 @@
-import { useEffect, useMemo, useCallback } from 'react'
-import useGetCurrentBreakpoint from '../use-window-width.hook'
 import { DeviceBreakpointEnum, FormElementConditionalKeyEnum } from '../../../../enums'
-import { hiddenStore } from './visibility-store'
 import { isValidationsMet } from './visibility-utils'
-import {
+import { useEffect } from 'react'
+import useGetCurrentBreakpoint from '../use-window-width.hook'
+import { FormInstance } from 'antd'
+import { hiddenStore } from './visibility-store'
+import type {
   IDndLayoutCol,
-  IDndLayoutElement,
   IDndLayoutRow,
   IDndLayoutStructure_Responsive,
   IFormLayoutElementConditions,
 } from '../../../../types'
 
+export function useSetHiddenNodes(
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formDataRef?: FormInstance,
+  formDataId?: string,
+): void {
+  const currentBreakpoint = useGetCurrentBreakpoint()
+
+  useEffect(() => {
+    // during the initial renders, handle the initially hidden nodes
+    if (!formDataRef) return
+
+    const allValues = formDataRef.getFieldsValue() || {}
+    const layout =
+      layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
+
+    const allInputsLoaded = layout.length > 0 && Object.values(allValues).filter(Boolean).length > 0 && !!formDataId
+
+    if (!allInputsLoaded) return
+
+    handleHiddenSet(allValues, currentBreakpoint, layoutConfig, formDataId)
+  }, [formDataRef, layoutConfig, currentBreakpoint, formDataId])
+}
+
+export function handleHiddenSet(
+  allValues: Record<string, any>,
+  currentBreakpoint: DeviceBreakpointEnum,
+  layoutConfig?: IDndLayoutStructure_Responsive,
+  formDataId?: string,
+) {
+  const hiddenIds = computeHiddenIds(allValues, currentBreakpoint, layoutConfig, formDataId)
+  hiddenStore.setIds(hiddenIds)
+}
+
 function computeHiddenIdsRecursive(layout: IDndLayoutRow[], individuallyHidden: Set<string>): string[] {
   const hiddenCols = new Set<string>()
   const hiddenRows = new Set<string>()
@@ -54,16 +87,15 @@ function computeHiddenIdsRecursive(layout: IDndLayoutRow[], individuallyHidden:
   return [...individuallyHidden, ...Array.from(hiddenCols), ...Array.from(hiddenRows)]
 }
 
-export function useSetHiddenNodes(
+function computeHiddenIds(
+  allValues: Record<string, any>,
+  currentBreakpoint: DeviceBreakpointEnum,
   layoutConfig?: IDndLayoutStructure_Responsive,
-  formValues?: { [key: string]: any },
   formDataId?: string,
-): void {
-  const currentBreakpoint = useGetCurrentBreakpoint() || DeviceBreakpointEnum.Default
-  const layout: IDndLayoutRow[] =
+): string[] {
+  const layout =
     layoutConfig?.layouts?.[currentBreakpoint] || layoutConfig?.layouts?.[DeviceBreakpointEnum.Default] || []
-  const elementsMap: Record<string, IDndLayoutElement> = layoutConfig?.elements || {}
-  const dataValues: { [key: string]: any } = formValues && typeof formValues === 'object' ? formValues : {}
+  const elementsMap = layoutConfig?.elements || {}
   const configsPerElement: Record<string, IFormLayoutElementConditions> = Object.values(elementsMap).reduce(
     (curr, el) => {
       const elConditions = el.conditions?.[FormElementConditionalKeyEnum.ShowIf]
@@ -72,40 +104,20 @@ export function useSetHiddenNodes(
 
       return curr
     },
-    {},
+    {} as any,
   )
 
-  const allInputsLoaded =
-    layout.length > 0 &&
-    Object.keys(elementsMap).length > 0 &&
-    Object.keys(configsPerElement).length > 0 &&
-    !!formDataId
-
-  const computeIndividuallyHidden = useCallback((): Set<string> => {
-    if (!allInputsLoaded) return new Set()
+  const individuallyHidden = new Set<string>()
+  for (const el of Object.values(elementsMap)) {
+    const elementConfigs = configsPerElement[el.key]
 
-    const hiddenSet = new Set<string>()
-
-    Object.values(elementsMap).forEach(({ key }) => {
-      const elementConfigs = configsPerElement[key]
-
-      const shouldShow = isValidationsMet(FormElementConditionalKeyEnum.ShowIf, dataValues, elementConfigs, {
-        currentBreakpoint,
-        formDataId,
-      })
-      if (!shouldShow) hiddenSet.add(key)
+    const shouldShow = isValidationsMet(FormElementConditionalKeyEnum.ShowIf, allValues, elementConfigs, {
+      currentBreakpoint,
+      formDataId,
     })
 
-    return hiddenSet
-  }, [elementsMap, dataValues, configsPerElement, currentBreakpoint, formDataId, allInputsLoaded])
-
-  const allHiddenArray = useMemo(() => {
-    const individuallyHidden = computeIndividuallyHidden()
-
-    return computeHiddenIdsRecursive(layout, individuallyHidden)
-  }, [layout, computeIndividuallyHidden])
+    if (!shouldShow) individuallyHidden.add(el.key)
+  }
 
-  useEffect(() => {
-    if (allInputsLoaded) hiddenStore.setIds(allHiddenArray)
-  }, [allHiddenArray, allInputsLoaded])
+  return computeHiddenIdsRecursive(layout, individuallyHidden)
 }

package/src/components/common/custom-hooks/use-set-persistent-domain.hook.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
+
+export const useSetPeristentDomain = (domain: string) => {
+  const location = useLocation()
+  const isLogin = location.pathname === '/login'
+
+  useEffect(() => {
+    if (!isLogin) return
+
+    if (typeof window === 'undefined') return
+
+    const current = window.localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.PersistDomain)
+    if (current !== domain) {
+      window.localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.PersistDomain, domain)
+      console.info(`[useSetCompanyDomain] "${LOCAL_STORAGE_KEYS_ENUM.PersistDomain}" set to "${domain}"`)
+    }
+  }, [isLogin])
+}

package/src/components/companies/2-unauthenticated/forgot-password.tsx

@@ -2,6 +2,7 @@ import { Button, Col, Form, Input, Row, Spin } from 'antd'
 import { useNavigate } from 'react-router-dom'
 import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
 import { useConfigContext } from '../context'
+import CompanyLogoSection, { LogoLocationEnum } from '../../common/company-logo'
 
 export const ForgotPassword = () => {
   const { config } = useConfigContext()
@@ -11,7 +12,6 @@ export const ForgotPassword = () => {
   const formPadding = config?.loginLayout?.form?.padding
   const titleColor = config?.loginLayout.form.color
   const background = config?.loginLayout?.background
-  const logoUrl = config?.siteIdentity?.logoUrl
   const primaryColor = config?.siteLayout?.siteConfigs?.colors?.primary
 
   return (
@@ -26,11 +26,9 @@ export const ForgotPassword = () => {
             maxWidth: '100%',
           }}
         >
-          {logoUrl && (
-            <div className="flex justify-center mb-4">
-              <img src={logoUrl} alt="Logo" className="h-10 object-contain" />
-            </div>
-          )}
+          <div className="flex justify-center mb-4">
+            <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} location={LogoLocationEnum.Unauthenticated} />
+          </div>
 
           <div className="font-bold mb-2" style={{ color: titleColor }}>
             Forgot Password?

package/src/components/companies/2-unauthenticated/index.tsx

@@ -3,6 +3,7 @@ import { useConfigContext } from '../context'
 import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
 import { FaPlus } from 'react-icons/fa'
 import { useNavigate } from 'react-router-dom'
+import CompanyLogoSection, { LogoLocationEnum } from '../../common/company-logo'
 
 export function UnauthenticatedLayout() {
   const { config } = useConfigContext()
@@ -23,7 +24,7 @@ export function UnauthenticatedLayout() {
 
   const logo = (
     <div className="flex justify-center">
-      <img src={siteIdentity?.logoUrl} alt="Logo" className="h-10 object-contain" />
+      <CompanyLogoSection logoUrl={siteIdentity?.logoUrl} location={LogoLocationEnum.Unauthenticated} />
     </div>
   )
 
@@ -43,7 +44,9 @@ export function UnauthenticatedLayout() {
 
   const formSection = (
     <div
-      className={`fc-login-container ${loginLayout?.layout === 'center' ? 'w-full' : 'w-1/2'} flex items-center justify-center h-screen`}
+      className={`fc-login-container ${
+        loginLayout?.layout === 'center' ? 'w-full' : 'w-1/2'
+      } flex items-center justify-center h-screen`}
     >
       <div
         style={{
@@ -57,7 +60,7 @@ export function UnauthenticatedLayout() {
           padding: `${loginLayout?.form?.padding || 16}px`,
           background: loginLayout?.form?.background,
         }}
-        className={`fc-login-panel max-h-screen overflow-auto shadow content-center text-center ${
+        className={`fc-login-panel max-h-screen overflow-auto shadow content-center text-center space-y-4 ${
           loginLayout?.formStyle === 'full' ? 'h-screen' : ''
         }`}
       >
@@ -75,7 +78,7 @@ export function UnauthenticatedLayout() {
             {loginLayout?.form?.title}
           </div>
         )}
-        <Form layout="vertical" onFinish={handleLogin} className='fc-login-form'>
+        <Form layout="vertical" onFinish={handleLogin} className="fc-login-form">
           <div>
             {loginLayout?.form?.fields?.map((field, index) => {
               const isLast = index === loginLayout?.form.fields.length - 1
@@ -140,7 +143,7 @@ export function UnauthenticatedLayout() {
           </div>
         </Form>
 
-        {loginLayout?.logoPosition === 'bottom' && <div className='fc-login-logo'>{logo}</div>}
+        {loginLayout?.logoPosition === 'bottom' && <div className="fc-login-logo">{logo}</div>}
       </div>
     </div>
   )

package/src/components/companies/2-unauthenticated/reset-password.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
 import { useConfigContext } from '../context'
 import { useRef } from 'react'
+import CompanyLogoSection, { LogoLocationEnum } from '../../common/company-logo'
 
 export const ResetPassword = () => {
   const { config } = useConfigContext()
@@ -21,7 +22,6 @@ export const ResetPassword = () => {
   const formPadding = config?.loginLayout?.form?.padding
   const titleColor = config?.loginLayout.form.color
   const background = config?.loginLayout?.background
-  const logoUrl = config?.siteIdentity?.logoUrl
   const primaryColor = config?.siteLayout?.siteConfigs?.colors?.primary
   const isFirstLoad = useRef(true)
   useEffect(() => {
@@ -64,11 +64,9 @@ export const ResetPassword = () => {
             maxWidth: '100%',
           }}
         >
-          {logoUrl && (
-            <div className="flex justify-center mb-4">
-              <img src={logoUrl} alt="Logo" className="h-10 object-contain" />
-            </div>
-          )}
+          <div className="flex justify-center mb-4">
+            <CompanyLogoSection logoUrl={config?.siteIdentity?.logoUrl} location={LogoLocationEnum.Unauthenticated} />
+          </div>
 
           <div className="font-bold mb-2" style={{ color: titleColor }}>
             Reset Password

package/src/components/companies/3-config-provider/index.tsx

@@ -3,14 +3,39 @@ import { ConfigProvider } from 'antd'
 import { ConfigContext } from '../context'
 import useSiteMetadata from '../../common/custom-hooks/use-site-meta-data'
 import { ReactNode } from 'react'
+import { Button_FillerPortal } from '../../common/button'
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 export function ConfigProviderLayout({ children }: { children: ReactNode }): JSX.Element {
-  const { config, theme } = useCompanyConfig()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { config, theme, canSwitchDomain } = useCompanyConfig()
   useSiteMetadata(config?.siteIdentity)
 
+  const showSwitchCompany =
+    canSwitchDomain &&
+    !localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.PersistDomain) &&
+    location.pathname.startsWith('/login')
+
   return (
     <ConfigContext.Provider value={{ config }}>
-      <ConfigProvider theme={theme}>{children}</ConfigProvider>
+      <ConfigProvider theme={theme}>
+        {showSwitchCompany && (
+          <div className="absolute top-2 right-2 z-20">
+            <Button_FillerPortal
+              outline
+              onClick={() => {
+                localStorage.removeItem(LOCAL_STORAGE_KEYS_ENUM.Domain)
+                navigate(0)
+              }}
+            >
+              Switch Project
+            </Button_FillerPortal>
+          </div>
+        )}
+        {children}
+      </ConfigProvider>
     </ConfigContext.Provider>
   )
 }

package/src/components/form/2-details/index.tsx

@@ -12,8 +12,14 @@ import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-ma
 import { PageViewTypEnum, DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import { UserAuth } from '../../../api/user'
 import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
-import { useSetHiddenNodes } from '../../common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook'
-import { useSetDisabledElements } from '../../common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook'
+import {
+  handleHiddenSet,
+  useSetHiddenNodes,
+} from '../../common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook'
+import {
+  handleDisabledSet,
+  useSetDisabledElements,
+} from '../../common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 import {
   DynamicFormButtonRender,
@@ -50,10 +56,9 @@ export default function FormDataDetailsComponent({
   const currentBreakpoint = useGetCurrentBreakpoint()
 
   const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(formId, formKey)
-  const detailsData = Form.useWatch([], formDataRef)
 
-  useSetHiddenNodes(cachedConfig?.detailsConfig, detailsData, formDataId)
-  useSetDisabledElements(cachedConfig?.detailsConfig, detailsData, formDataId)
+  useSetHiddenNodes(cachedConfig?.detailsConfig, formDataRef, formDataId)
+  useSetDisabledElements(cachedConfig?.detailsConfig, formDataRef, formDataId)
 
   useEffect(() => {
     // for public forms, setting the details form into localStorage, so that buttons work correctly
@@ -176,6 +181,10 @@ export default function FormDataDetailsComponent({
         name="dynamic_form_data_form"
         form={formDataRef}
         className={ELEMENTS_DEFAULT_CLASS.DataDetailsForm}
+        onValuesChange={(_changed, allValues) => {
+          handleDisabledSet(allValues, currentBreakpoint, cachedConfig?.detailsConfig, formDataId)
+          handleHiddenSet(allValues, currentBreakpoint, cachedConfig?.detailsConfig, formDataId)
+        }}
       >
         {layout.map((row, rowIdx) => (
           <LayoutRendererRow

package/src/components/form/layout-renderer/1-row/header-render.tsx

@@ -1,6 +1,6 @@
-import { ReactNode, useState } from 'react'
+import { ReactNode, useState, useTransition } from 'react'
 import { IFormDndLayoutRowHeader } from '../../../../types'
-import { Collapse } from 'antd'
+import { Collapse, Spin } from 'antd'
 import RowHeader from './header'
 
 export const LayoutRowConditionalHeaderRenderer = ({
@@ -11,21 +11,30 @@ export const LayoutRowConditionalHeaderRenderer = ({
   header: IFormDndLayoutRowHeader | undefined
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isPendingTransition, startTransition] = useTransition()
 
   if (header?.isCollapsible)
     return (
-      <Collapse
-        className="fc-collapsible-row bg-transparent"
-        bordered={false}
-        defaultActiveKey={[]}
-        items={[
-          {
-            key: '1',
-            label: <RowHeader {...header} isCollapsed={isCollapsed} setIsCollapsed={() => setIsCollapsed((c) => !c)} />,
-            children,
-          },
-        ]}
-      />
+      <Spin spinning={isPendingTransition}>
+        <Collapse
+          className="fc-collapsible-row bg-transparent"
+          bordered={false}
+          defaultActiveKey={header.defaultCollapsed ? [] : ['1']}
+          items={[
+            {
+              key: '1',
+              label: (
+                <RowHeader
+                  {...header}
+                  isCollapsed={isCollapsed}
+                  setIsCollapsed={() => startTransition(() => setIsCollapsed((c) => !c))}
+                />
+              ),
+              children,
+            },
+          ]}
+        />
+      </Spin>
     )
 
   if (header?.name)

package/src/components/form/layout-renderer/1-row/index.tsx

@@ -28,7 +28,11 @@ export const LayoutRendererRow = memo(
         className={ELEMENTS_DEFAULT_CLASS.LayoutRowContainer}
       >
         <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
-          <LayoutRowRepeatableRenderer basePath={basePath} repeatingSection={rowData.props?.repeatingSection}>
+          <LayoutRowRepeatableRenderer
+            basePath={basePath}
+            formRef={formContext.formRef}
+            repeatingSection={rowData.props?.repeatingSection}
+          >
             {(formListItemProps) => {
               const style: { [key: string]: any } = { ...styleConfig, ...getGridContainerStyle(rowData.display) }
               const hiddenColsIndices = rowData.children.reduce(