form-craft-package 1.7.11-dev.0 → 1.7.12-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.7.11-dev.0",
+  "version": "1.7.12-dev.0",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -11,10 +11,13 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "@tanstack/query-sync-storage-persister": "^5.77.2",
+    "@tanstack/react-query-persist-client": "^5.77.2",
     "ajv": "^8.17.1",
     "axios": "^1.9.0",
     "crypto-js": "^4.2.0",
     "js-cookie": "^3.0.5",
+    "lodash.isequal": "^4.5.0",
     "pdfmake": "^0.2.18",
     "qs": "^6.14.0",
     "quill": "^2.0.3",
@@ -24,6 +27,7 @@
     "react-signature-canvas": "^1.0.7"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.76.1",
     "antd": ">=5.21.6",
     "dayjs": ">=1.11.13",
     "react": ">=18.0.0 <19.0.0",
@@ -34,6 +38,7 @@
   "devDependencies": {
     "@types/crypto-js": "^4.2.2",
     "@types/js-cookie": "^3.0.6",
+    "@types/lodash.isequal": "^4.5.8",
     "@types/pdfmake": "^0.2.11",
     "@types/qs": "^6.9.18",
     "@types/react": "^18.3.18",

package/src/api/client.ts

@@ -10,7 +10,7 @@ import axios, {
   InternalAxiosRequestConfig,
 } from 'axios'
 
-import { BreadcrumbTypeEnum, LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS } from '../enums'
+import { PageViewTypEnum, LOCAL_STORAGE_KEYS_ENUM, SHARED_COOKIE_KEYS } from '../enums'
 import { IDynamicForm } from '../types'
 import { constructDynamicFormHref, fetchDynamicForms } from '../functions'
 import { CLIENT_ID, CLIENT_SECRET } from '../constants'
@@ -27,7 +27,12 @@ apiClient.interceptors.request.use((config) => {
   return config
 })
 
-const authResHandler = (resData: { access_token: string; refresh_token: string; expires_in: number }) => {
+const authResHandler = (resData: {
+  access_token: string
+  refresh_token: string
+  companyKey: string
+  expires_in: number
+}) => {
   const expiry = new Date(Date.now() + resData.expires_in * 1000)
   Cookies.set(SHARED_COOKIE_KEYS.AccessToken, resData.access_token, {
     expires: expiry,
@@ -37,6 +42,7 @@ const authResHandler = (resData: { access_token: string; refresh_token: string;
     expires: expiry,
     path: '/',
   })
+  Cookies.set(SHARED_COOKIE_KEYS.CompanyKey, resData.companyKey, { expires: expiry, path: '/' })
 }
 
 let isRefreshing = false
@@ -180,7 +186,7 @@ export const auth = async (
           breadcrumbStore.push({
             label: splittedFormName,
             href: constructDynamicFormHref(firstForm.name),
-            type: BreadcrumbTypeEnum.List,
+            type: PageViewTypEnum.List,
           })
         }
 

package/src/components/common/custom-hooks/use-breadcrumb.hook.ts

@@ -1,8 +1,8 @@
 import { useSyncExternalStore } from 'react'
-import { BreadcrumbTypeEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
+import { PageViewTypEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
 
-export type IBreadcrumb = { label: string; href: string; [key: string]: any; type: BreadcrumbTypeEnum }
+export type IBreadcrumb = { label: string; href: string; [key: string]: any; type: PageViewTypEnum }
 
 let crumbs: IBreadcrumb[] = loadFromStorage()
 const listeners = new Set<() => void>()

package/src/components/common/custom-hooks/use-cache-form-layout-config.hook.ts

@@ -0,0 +1,111 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/react-query'
+import isEqual from 'lodash.isequal'
+import { IFormConfigDetails, IFormSchema } from '../../../types'
+import client from '../../../api/client'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { persistQueryClient } from '@tanstack/react-query-persist-client'
+
+export interface UseCacheFormLayoutConfig {
+  cachedConfig?: IFormConfigDetails & IFormSchema & { formId?: number }
+  isConfigLoading: boolean
+  isUpdateFound: boolean
+  applyUpdate: () => void
+}
+
+export function useCacheFormLayoutConfig(formId?: number): UseCacheFormLayoutConfig {
+  const queryClient = useQueryClient()
+
+  const [currentSchema, setCurrentSchema] = useState<IFormConfigDetails & IFormSchema>()
+  const [pendingSchema, setPendingSchema] = useState<IFormConfigDetails & IFormSchema>()
+
+  useEffect(() => {
+    setCurrentSchema(undefined)
+    setPendingSchema(undefined)
+  }, [formId])
+
+  const queryKey = useMemo(() => ['layoutConfig', formId ? String(formId) : 'default'] as const, [formId])
+
+  const {
+    data: fetchedSchema,
+    isLoading,
+    isSuccess,
+  } = useQuery<(IFormConfigDetails & IFormSchema) | undefined, Error>({
+    queryKey,
+    queryFn: () => fetchLayoutConfig(formId),
+    gcTime: Infinity,
+    enabled: !!formId,
+    placeholderData: keepPreviousData,
+  })
+
+  useEffect(() => {
+    const localStoragePersistor = createSyncStoragePersister({
+      storage: window.localStorage,
+    })
+    persistQueryClient({
+      queryClient,
+      persister: localStoragePersistor,
+      // maxAge: 1000 * 60 * 60 * 24, // 24h
+      dehydrateOptions: {
+        shouldDehydrateQuery: (query) => {
+          const [key, id] = query.queryKey
+          if (key === 'layoutConfig' && id === String(formId)) return false
+
+          return true
+        },
+      },
+    })
+  }, [queryClient, formId])
+
+  // ─── on new network data: queue diffs ───
+  useEffect(() => {
+    if (!isSuccess || !fetchedSchema || !formId) return
+
+    let timer: ReturnType<typeof setTimeout> | undefined
+
+    // first-ever load
+    if (!currentSchema) {
+      timer = setTimeout(() => {
+        setCurrentSchema(fetchedSchema)
+      }, 250)
+    }
+
+    // later loads with real changes → queue up
+    else if (!isEqual(currentSchema, fetchedSchema)) setPendingSchema(fetchedSchema)
+
+    return () => {
+      if (timer) clearTimeout(timer)
+    }
+  }, [isSuccess, fetchedSchema, currentSchema, formId])
+
+  // ─── apply any queued updates ──
+  const applyUpdate = useCallback(() => {
+    if (!pendingSchema) return
+
+    // overwrite the cached schema
+    queryClient.setQueryData(queryKey, pendingSchema)
+
+    setCurrentSchema(pendingSchema)
+    setPendingSchema(undefined)
+  }, [pendingSchema, queryClient, queryKey])
+
+  return {
+    cachedConfig: currentSchema?.id !== formId ? pendingSchema : currentSchema,
+    isConfigLoading: !!formId ? isLoading && !currentSchema : false,
+    isUpdateFound: Boolean(pendingSchema),
+    applyUpdate,
+  }
+}
+
+async function fetchLayoutConfig(formId?: number): Promise<(IFormConfigDetails & IFormSchema) | undefined> {
+  if (!formId) return undefined
+
+  try {
+    const res = await client.get<{ data: string }>(`/api/form/${formId}`)
+    if (res.status === 200) {
+      const { data: jsonData, ...restResData } = res.data
+      return { ...restResData, ...JSON.parse(jsonData) } as IFormConfigDetails & IFormSchema
+    }
+  } catch {}
+  return
+}

package/src/components/common/loading-skeletons/table.tsx

@@ -3,7 +3,7 @@ import SkeletonBlock from '.'
 export default function FormDataListSkeleton_Table({ small = false }: { small?: boolean }) {
   return (
     <>
-      <div className={`bg-white flex items-center justify-between rounded-md mb-2 ${small ? 'p-2' : 'p-3'}`}>
+      <div className={`flex items-center justify-between rounded-md mb-2`}>
         <SkeletonBlock width="200px" height={small ? 20 : undefined} />
         <div className="flex items-center gap-2">
           <SkeletonBlock width="150px" height={small ? 20 : undefined} />

package/src/components/form/1-list/index.tsx

@@ -5,22 +5,36 @@ import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-butt
 import FormDataListTableComponent, { IDataListLayoutConfig } from './table'
 import { IFormJoin, IFormDataListData, IFormDataListConfig } from '../../../types'
 import { getProjectionKey, mergeJoins } from '../../../functions'
-
-function FormDataListComponent({ formId, companyKey, baseServerUrl, onCustomFunctionCall }: IFormDataListComponent) {
-  const [loadings, setLoadings] = useState({ initial: true, data: true })
+import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
+import { useNotification } from '../../common/custom-hooks'
+
+export function FormDataListComponent({
+  formId,
+  companyKey,
+  baseServerUrl,
+  onCustomFunctionCall,
+}: IFormDataListComponent) {
+  const [dataLoading, setDataLoading] = useState(true)
   const [dataList, setDataList] = useState<{ data: IFormDataListData[]; total: number }>({ data: [], total: 0 })
   const [listLayoutConfig, setListLayoutConfig] = useState<IDataListLayoutConfig>()
+  const { warning, destroy } = useNotification()
 
   const reportDataApiCancelFuncRef = useRef<() => void | undefined>()
   const dataProjectRef = useRef<{ [key: string]: string }>({})
   const formJoinsRef = useRef<IFormJoin[]>([])
   const defaultFilterReqDataRef = useRef<IDataListReqData | undefined>()
+  const apiCallCounterRef = useRef(0)
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
   const headerLayoutContext = { formId, attachmentBaseUrl, companyKey, onCustomFunctionCall }
 
+  const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(formId)
+
+  useEffect(() => {
+    reportDataApiCancelFuncRef.current?.()
+  }, [formId])
+
   useEffect(() => {
-    setLoadings({ initial: true, data: true })
     setDataList({ data: [], total: 0 })
     dataProjectRef.current = {}
     formJoinsRef.current = []
@@ -28,62 +42,58 @@ function FormDataListComponent({ formId, companyKey, baseServerUrl, onCustomFunc
   }, [location.pathname])
 
   useEffect(() => {
-    if (!formId) return
-    const { request, cancel } = cancelableClient.post(`/api/form/${formId}`, {
-      project: JSON.stringify({ 'Data.dataListConfig': 1 }),
-    })
-    request.then(async (res) => {
-      if (res.status === 200) {
-        const dataListConfig: IFormDataListConfig = res.data.Data.dataListConfig
-        const { columns, pagination, defaultFilter, defaultSorter, header } = dataListConfig
-
-        if (Array.isArray(columns)) {
-          dataProjectRef.current = columns.reduce(
-            (curr, c) => (c.key ? { ...curr, [getProjectionKey(c.key)]: `$${c.key}` } : curr),
-            {},
-          )
-
-          formJoinsRef.current = mergeJoins([
-            ...columns.map((c) => c.joins),
-            ...Object.values(header.elements).reduce((c: IFormJoin[], el) => {
-              if (el.props && 'filter' in el.props && Array.isArray(el.props.filter?.joins)) {
-                return [...c, el.props.filter.joins]
-              }
-              return c
-            }, []),
-          ])
-        }
-        const defaultReqData: IDataListReqData = {}
-        if (!pagination?.hasNoPagination) {
-          defaultReqData.current = 1
-          defaultReqData.limit = pagination?.defaultPageSize ?? 10
-        }
-        if (defaultSorter) defaultReqData.sort = JSON.stringify({ [defaultSorter.field]: defaultSorter.order })
-        if (defaultFilter?.config && Object.values(defaultFilter.config).length)
-          // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
-          defaultReqData.match = JSON.stringify(defaultFilter.config).replaceAll('@', '$')
-
-        defaultFilterReqDataRef.current = defaultReqData
-
-        fetchFormDataList(defaultReqData)
-
-        // configForFormId is passed to ensure that the table shows the correct data list when the forms are switched quickly
-        setListLayoutConfig({
-          configForFormId: formId,
-          dataListConfig: {
-            ...dataListConfig,
-            columns: columns.map((c) => (c.key ? { ...c, key: getProjectionKey(c.key) } : c)),
-          },
-        })
-      }
+    if (!formId || !cachedConfig) return
+
+    const { columns, pagination, defaultFilter, defaultSorter, header } =
+      cachedConfig.dataListConfig as IFormDataListConfig
+
+    if (Array.isArray(columns)) {
+      dataProjectRef.current = columns.reduce(
+        (curr, c) => (c.key ? { ...curr, [getProjectionKey(c.key)]: `$${c.key}` } : curr),
+        {},
+      )
+
+      formJoinsRef.current = mergeJoins([
+        ...columns.map((c) => c.joins),
+        ...Object.values(header.elements).reduce((c: IFormJoin[], el) => {
+          if (el.props && 'filter' in el.props && Array.isArray(el.props.filter?.joins)) {
+            return [...c, el.props.filter.joins]
+          }
+          return c
+        }, []),
+      ])
+    }
+
+    const defaultReqData: IDataListReqData = {}
+
+    if (!pagination?.hasNoPagination) {
+      defaultReqData.current = 1
+      defaultReqData.limit = pagination?.defaultPageSize ?? 10
+    }
+    if (defaultSorter) defaultReqData.sort = JSON.stringify({ [defaultSorter.field]: defaultSorter.order })
+    if (defaultFilter?.config && Object.values(defaultFilter.config).length)
+      // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
+      defaultReqData.match = JSON.stringify(defaultFilter.config).replaceAll('@', '$')
+
+    defaultFilterReqDataRef.current = defaultReqData
+
+    fetchFormDataList(defaultReqData)
+
+    // configForFormId is passed to ensure that the table shows the correct data list when the forms are switched quickly
+    setListLayoutConfig({
+      configForFormId: formId,
+      dataListConfig: {
+        ...cachedConfig.dataListConfig,
+        columns: columns.map((c) => (c.key ? { ...c, key: getProjectionKey(c.key) } : c)),
+      } as IFormDataListConfig,
     })
-
-    return () => cancel()
-  }, [formId])
+  }, [formId, cachedConfig?.dataListConfig])
 
   const fetchFormDataList = useCallback(
     (reqData?: IDataListReqData & { skip?: number }) => {
       if (!reqData || !formId) return
+      apiCallCounterRef.current += 1
+      setDataLoading(true)
 
       if (!reqData.current && defaultFilterReqDataRef.current?.current)
         reqData.current = defaultFilterReqDataRef.current.current
@@ -101,17 +111,25 @@ function FormDataListComponent({ formId, companyKey, baseServerUrl, onCustomFunc
         joins: formJoinsRef.current,
         project: JSON.stringify(dataProjectRef.current),
         ...restReqData,
-        // match: JSON.stringify({"Data.phaseId": 16673})
       })
       reportDataApiCancelFuncRef.current = cancel
 
       request
         .then((res) => {
-          if (res.status === 200) setDataList({ data: res.data.data, total: res.data.totalRecords })
+          if (res.status === 200) {
+            setDataList({ data: res.data.data, total: res.data.totalRecords })
+          }
+        })
+        .catch((err) => {
+          if (err?.response?.status === 500) {
+            destroy()
+            warning({ message: 'There has been an error fetching the data!' })
+          }
         })
         .finally(() => {
-          setLoadings({ initial: false, data: false })
+          apiCallCounterRef.current -= 1
           reportDataApiCancelFuncRef.current = undefined
+          if (apiCallCounterRef.current === 0) setDataLoading(false)
         })
     },
     [formId],
@@ -122,20 +140,17 @@ function FormDataListComponent({ formId, companyKey, baseServerUrl, onCustomFunc
       layoutsConfigs={listLayoutConfig}
       dataList={dataList}
       updateDataList={(reqData) => {
-        if (reportDataApiCancelFuncRef.current)
-          // prev request
-          reportDataApiCancelFuncRef.current()
+        if (reportDataApiCancelFuncRef.current) reportDataApiCancelFuncRef.current()
 
         fetchFormDataList(reqData)
       }}
-      parentLoadings={loadings}
+      parentLoadings={{ data: dataLoading, initial: isConfigLoading || !cachedConfig }}
       loadingBlock={<FormDataListSkeleton_Table />}
-      setParentLoading={(bool) => setLoadings((c) => ({ ...c, data: bool as boolean }))}
+      setParentLoading={(bool) => setDataLoading(bool)}
       headerLayoutContext={headerLayoutContext}
     />
   )
 }
-export { FormDataListComponent }
 
 type IFormDataListComponent = {
   baseServerUrl?: string

package/src/components/form/1-list/table.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import FormDataListHeaderComponent from './table-header'
 import useDebounced from '../../common/custom-hooks/use-debounce.hook'
-import { Table } from 'antd'
+import { Spin, Table } from 'antd'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
 import { constructDynamicFormHref, renderTableColumns, revertProjectionKey } from '../../../functions/forms'
@@ -100,26 +100,25 @@ export default function FormDataListTableComponent({
     [tableColumns, currentBreakpoint],
   )
 
+  // if (loading) return
   if (loading && loadingBlock) return loadingBlock
 
   return (
     <>
-      {!parentLoadings.initial && (
-        <FormDataListHeaderComponent
-          layoutConfig={layoutsConfigs?.dataListConfig.header}
-          updateDynamicFilter={(match) => {
-            setParentLoading(true)
-            setFilterReqData((c) => ({ ...c, match, current: 1 }))
-          }}
-          titleComponent={
-            <>
-              <span className="pr-1">{otherConfigs?.title}</span>
-              {otherConfigs?.showCount && <span>({dataList.total})</span>}
-            </>
-          }
-          headerLayoutContext={headerLayoutContext}
-        />
-      )}
+      <FormDataListHeaderComponent
+        layoutConfig={layoutsConfigs?.dataListConfig.header}
+        updateDynamicFilter={(match) => {
+          setParentLoading(true)
+          setFilterReqData((c) => ({ ...c, match, current: 1 }))
+        }}
+        titleComponent={
+          <>
+            <span className="pr-1">{otherConfigs?.title}</span>
+            {otherConfigs?.showCount && <span>({parentLoadings.data ? <Spin size="small" /> : dataList.total})</span>}
+          </>
+        }
+        headerLayoutContext={headerLayoutContext}
+      />
       {(!otherConfigs || otherConfigs.listType === FormDataListViewTypeEnum.Table) && (
         <Table<IFormDataListData>
           dataSource={dataList.data}

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

@@ -1,6 +1,6 @@
-import { Form } from 'antd'
+import { Form, Spin } from 'antd'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { IDndLayoutStructure_Responsive, IFormSchema } from '../../../types'
+import { IDndLayoutStructure_Responsive } from '../../../types'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
@@ -10,12 +10,7 @@ import client from '../../../api/client'
 import { useBreadcrumb } from '../../common/custom-hooks/use-breadcrumb.hook'
 import NotFound from '../../common/not-found'
 import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-many-connector.hook'
-import {
-  BreadcrumbTypeEnum,
-  DeviceBreakpointEnum,
-  FormPreservedItemKeys,
-  LOCAL_STORAGE_KEYS_ENUM,
-} from '../../../enums'
+import { PageViewTypEnum, DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import {
   fromMongoDbExtendedJSON,
   getPickerFieldsWithOriginalTz,
@@ -23,6 +18,8 @@ import {
   isValidMongoDbId,
   queryParamsToObject,
 } from '../../../functions/forms'
+import { UserAuth } from '../../../api/user'
+import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -38,14 +35,15 @@ export default function FormDataDetailsComponent({
   const { push } = useBreadcrumb()
   const location = useLocation()
   const [formDataRef] = Form.useForm()
-  const [loadings, setLoadings] = useState({ layout: true, data: true })
-  const [layoutConfig, setLayoutConfig] = useState<IDndLayoutStructure_Responsive>({ elements: {}, layouts: {} })
+  const [loading, setLoading] = useState(true)
   const [isNotFound, setIsNotFound] = useState(false)
   const originalTzFieldsRef = useRef<string[]>([])
   useManyToManyConnector(formDataRef)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
 
+  const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(formId)
+
   useEffect(() => {
     // for public forms, setting the details form into localStorage, so that buttons work correctly
     if (isPublic)
@@ -61,15 +59,10 @@ export default function FormDataDetailsComponent({
     push({
       label: isNewFormDataPage(formDataId) ? splittedFormName.toLowerCase() : splittedFormName,
       href: location.pathname,
-      type: isNewFormDataPage(formDataId) ? BreadcrumbTypeEnum.New : BreadcrumbTypeEnum.Details,
+      type: isNewFormDataPage(formDataId) ? PageViewTypEnum.New : PageViewTypEnum.Details,
     })
   }, [location.pathname, formName, formDataId])
 
-  const layout = useMemo(
-    () => layoutConfig.layouts[currentBreakpoint] ?? layoutConfig.layouts[DeviceBreakpointEnum.Default] ?? [],
-    [layoutConfig.layouts, currentBreakpoint],
-  )
-
   // Apply initialValues from parent
   useEffect(() => {
     if (initialValues && isNewFormDataPage(formDataId)) {
@@ -96,7 +89,7 @@ export default function FormDataDetailsComponent({
 
   const fetchFormData = useCallback(
     (dFormId?: number) => {
-      if (isNewFormDataPage(formDataId) || !isValidMongoDbId(formDataId)) setLoadings((c) => ({ ...c, data: false }))
+      if (isNewFormDataPage(formDataId) || !isValidMongoDbId(formDataId)) setLoading(false)
       else {
         if (!dFormId) {
           console.error('Form ID is required to fetch form data')
@@ -119,69 +112,73 @@ export default function FormDataDetailsComponent({
               }
             } else setIsNotFound(true)
           })
-          .finally(() => setLoadings((c) => ({ ...c, data: false })))
+          .finally(() => setLoading(false))
       }
     },
     [formDataId, formDataRef],
   )
 
   useEffect(() => {
-    if (formId || formKey) {
-      const endpoint = isPublic ? `/api/site/${formKey}` : `/api/form/${formId}`
-      client
-        .get(endpoint)
-        .then((res) => {
-          if (res.status === 200) {
-            const parsedData: IFormSchema | null = JSON.parse(res.data.data)
-            if (parsedData) {
-              console.log('FORM LAYOUT FETCH (PARSED)', parsedData)
-              const { layouts: rawLayouts, elements } = parsedData.detailsConfig
-              originalTzFieldsRef.current = getPickerFieldsWithOriginalTz(elements)
-
-              if (isPublic) {
-                if (parsedData.generateConfig?.submissionPdf?.enabled)
-                  formDataRef.setFieldValue(
-                    FormPreservedItemKeys.SubmissionPdfConfig,
-                    parsedData.generateConfig.submissionPdf,
-                  )
-                setLoadings((c) => ({ ...c, data: false }))
-              } else fetchFormData(formId)
-
-              setLayoutConfig({ elements, layouts: rawLayouts })
-            }
-          }
-        })
-        .finally(() => setLoadings((c) => ({ ...c, layout: false })))
-    }
-  }, [formId, formKey, isPublic, formDataRef, fetchFormData])
+    if (!cachedConfig?.detailsConfig) return
+
+    const { elements } = cachedConfig.detailsConfig as IDndLayoutStructure_Responsive
+    originalTzFieldsRef.current = getPickerFieldsWithOriginalTz(elements)
+
+    if (isPublic) {
+      if (cachedConfig.generateConfig?.submissionPdf?.enabled)
+        formDataRef.setFieldValue(FormPreservedItemKeys.SubmissionPdfConfig, cachedConfig.generateConfig.submissionPdf)
+      setLoading(false)
+    } else fetchFormData(formId)
+  }, [cachedConfig, formId, isPublic, formDataRef, fetchFormData])
+
+  const layout = useMemo(() => {
+    if (!cachedConfig?.detailsConfig?.layouts) return []
+
+    const deviceLayout =
+      cachedConfig.detailsConfig.layouts[currentBreakpoint] ??
+      cachedConfig.detailsConfig.layouts[DeviceBreakpointEnum.Default]
+
+    if (!deviceLayout) return []
+
+    return deviceLayout
+  }, [cachedConfig?.detailsConfig, currentBreakpoint])
 
   const formContext = useMemo(
-    () => ({ detailPageFormId: formId, formId, formKey, formDataId, formRef: formDataRef, companyKey }),
+    () => ({
+      detailPageFormId: formId,
+      formId,
+      formKey,
+      formDataId,
+      formRef: formDataRef,
+      companyKey: UserAuth.getCompanyKey(),
+    }),
     [formDataId, formDataRef, formId, formKey, companyKey],
   )
 
-  if (loadings.layout || loadings.data) return <FormDataListSkeleton_Details />
+  if (isConfigLoading || !cachedConfig) return <FormDataListSkeleton_Details />
 
   if (isNotFound) return <NotFound />
 
   return (
-    <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
-      {layout.map((row, rowIdx) => (
-        <LayoutRendererRow
-          key={rowIdx}
-          rowData={row}
-          formContext={formContext}
-          elements={layoutConfig.elements}
-          renderButton={(btnProps, conditions) => (
-            <DynamicFormButtonRender
-              displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
-              formContext={formContext}
-              onCustomFunctionCall={onCustomFunctionCall}
-            />
-          )}
-        />
-      ))}
-    </Form>
+    <Spin spinning={loading}>
+      <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
+        {layout.map((row, rowIdx) => (
+          <LayoutRendererRow
+            key={rowIdx}
+            rowData={row}
+            formContext={formContext}
+            elements={cachedConfig.detailsConfig.elements}
+            renderButton={(btnProps, conditions) => (
+              <DynamicFormButtonRender
+                displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
+                formContext={formContext}
+                onCustomFunctionCall={onCustomFunctionCall}
+              />
+            )}
+          />
+        ))}
+      </Form>
+    </Spin>
   )
 }
 

package/src/components/form/layout-renderer/3-element/11-breadcrumb.tsx

@@ -3,7 +3,7 @@ import { Button_FillerPortal } from '../../../common/button'
 import { useNavigate } from 'react-router-dom'
 import { FaChevronRight } from 'react-icons/fa6'
 import React from 'react'
-import { BreadcrumbTypeEnum } from '../../../../enums'
+import { PageViewTypEnum } from '../../../../enums'
 import { IBreadcrumbElementProps } from '../../../../types'
 
 export default function LayoutRenderer_Breadcrumb({ elementProps }: { elementProps: IBreadcrumbElementProps }) {
@@ -23,11 +23,11 @@ export default function LayoutRenderer_Breadcrumb({ elementProps }: { elementPro
             }}
           >
             <span className="font-normal italic">
-              {bc.type === BreadcrumbTypeEnum.New ? `${elementProps.newText} ` : ''}
+              {bc.type === PageViewTypEnum.New ? `${elementProps.newText} ` : ''}
               {bc.label}
-              {bc.type === BreadcrumbTypeEnum.Details
+              {bc.type === PageViewTypEnum.Details
                 ? ` ${elementProps.detailText}`
-                : bc.type === BreadcrumbTypeEnum.List
+                : bc.type === PageViewTypEnum.List
                 ? ` ${elementProps.listText}`
                 : ''}
             </span>

package/src/components/form/layout-renderer/3-element/8-fields-with-options.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { BreadcrumbTypeEnum, FieldElementOptionSourceEnum, FilterConfigTypeEnum } from '../../../../enums'
+import { PageViewTypEnum, FieldElementOptionSourceEnum, FilterConfigTypeEnum } from '../../../../enums'
 import { IElementBaseProps } from '.'
 import { LayoutRenderer_FieldElement } from './2-field-element'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
@@ -275,7 +275,7 @@ export default function LayoutRenderer_FieldsWithOptions({
                         const formInfo = getFormById(props.optionSource.formId)
                         if (!formInfo) return
 
-                        push({ label: formInfo.name, href: location.pathname, type: BreadcrumbTypeEnum.Details })
+                        push({ label: formInfo.name, href: location.pathname, type: PageViewTypEnum.Details })
                         navigate(`${constructDynamicFormHref(formInfo.name)}/${selectedValue}`)
                       }}
                     >

package/src/components/form/layout-renderer/3-element/9-form-data-render.tsx

@@ -6,13 +6,13 @@ import { getIdEqualsQuery, getProjectionKey, isNewFormDataPage, mergeJoins } fro
 import { cancelableClient } from '../../../../api/client'
 import { IFormContext } from '../1-row'
 import { FilterConfigTypeEnum, FormRelationshipEnum } from '../../../../enums'
+import { useCacheFormLayoutConfig } from '../../../common/custom-hooks/use-cache-form-layout-config.hook'
 import {
   IFormDataListData,
   IFormDataLoadElementProps,
   IFormJoin,
   IFormRelationshipConfig,
   IFormRelationshipConfig_OneToMany,
-  IFormSchema,
 } from '../../../../types'
 
 export default function LayoutRenderer_LoadFormData({ formContext, elementProps }: ILayoutRenderer_LoadFormData) {
@@ -22,9 +22,11 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
     formName: '',
     parentFormJoins: [],
   })
-  const [loadings, setLoadings] = useState({ initial: true, data: true })
+  const [loading, setLoading] = useState(true)
   const [listLayoutConfig, setListLayoutConfig] = useState<IDataListLayoutConfig>()
 
+  const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(baseFormId)
+
   const [dataList, setDataList] = useState<{ data: IFormDataListData[]; total: number }>({ data: [], total: 0 })
   const dataProjectRef = useRef<{ [key: string]: string }>({})
   const reportDataApiCancelFuncRef = useRef<() => void | undefined>(undefined)
@@ -38,7 +40,7 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
         : '',
     ) => {
       if (!baseFormId) return
-      setLoadings((c) => ({ ...c, data: true }))
+      setLoading(true)
 
       const matchFilters: { [key: string]: any }[] = [getIdEqualsQuery(formId, formDataId)]
       if (headerAppliedFilters) matchFilters.push(JSON.parse(headerAppliedFilters))
@@ -61,72 +63,63 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
             setDataList({ data: res.data.data, total: res.data.totalRecords })
           }
         })
-        .finally(() => setLoadings({ initial: false, data: false }))
+        .finally(() => setLoading(false))
     },
     [joins, baseFormId, initialFilter],
   )
 
   useEffect(() => {
-    if (!baseFormId || isNewFormDataPage(formDataId)) return
-
-    // fetching display config (base form can be different than display config form)
-    const { request, cancel } = cancelableClient.get(`/api/form/${baseFormId}`)
-    request.then((res) => {
-      if (res.status === 200) {
-        const parsedData: IFormSchema | null = JSON.parse(res.data.data)
-        if (!parsedData) return
-        const { relationships = [] } = parsedData
-
-        const relationship: IFormRelationshipConfig | undefined = relationships.find((r: IFormRelationshipConfig) =>
-          r.displayConfigs?.some((dc) => dc.id === displayConfigId),
-        )
-        const displayConfig = relationship?.displayConfigs?.find((dc) => dc.id === displayConfigId)
-
-        if (!displayConfig || displayConfig.isRenderChildForm) return
-
-        if (relationship!.type === FormRelationshipEnum.OneToMany && relationship?.m2mTargetFormFK)
-          m2mForeignKeysRef.current = {
-            currentForm: relationship!.foreignKey,
-            otherForm: (relationship as IFormRelationshipConfig_OneToMany)!.m2mTargetFormFK!,
-          }
+    if (isNewFormDataPage(formDataId) || !cachedConfig) return
+
+    const { relationships = [] } = cachedConfig
 
-        lastChildInfo.current = { formName: res.data.name, parentFormJoins: joins }
-
-        if (displayConfig.config) {
-          formJoinsRef.current = mergeJoins([
-            ...displayConfig.config.columns.map((c) => c.joins),
-            ...Object.values(displayConfig.config.header.elements).reduce((c: IFormJoin[], el) => {
-              if (el.props && 'filter' in el.props && Array.isArray(el.props.filter?.joins)) {
-                return [...c, el.props.filter.joins]
-              }
-              return c
-            }, []),
-          ])
-          if (Array.isArray(displayConfig.config.columns))
-            dataProjectRef.current = displayConfig.config.columns.reduce((curr, c) => {
-              if (!c.key) return curr
-
-              return { ...curr, [getProjectionKey(c.key)]: `$${c.key}` }
-            }, {})
-
-          setListLayoutConfig({
-            configForFormId: baseFormId,
-            dataListConfig: {
-              ...displayConfig.config,
-              columns: displayConfig.config.columns.map((c) => (c.key ? { ...c, key: getProjectionKey(c.key) } : c)),
-            },
-          })
-
-          fetchDataList()
-        }
+    const relationship: IFormRelationshipConfig | undefined = relationships.find((r: IFormRelationshipConfig) =>
+      r.displayConfigs?.some((dc) => dc.id === displayConfigId),
+    )
+    const displayConfig = relationship?.displayConfigs?.find((dc) => dc.id === displayConfigId)
+
+    if (!displayConfig || displayConfig.isRenderChildForm) return
+
+    if (relationship!.type === FormRelationshipEnum.OneToMany && relationship?.m2mTargetFormFK)
+      m2mForeignKeysRef.current = {
+        currentForm: relationship!.foreignKey,
+        otherForm: (relationship as IFormRelationshipConfig_OneToMany)!.m2mTargetFormFK!,
       }
-    })
+
+    lastChildInfo.current = { formName: cachedConfig.name, parentFormJoins: joins }
+
+    if (displayConfig.config) {
+      formJoinsRef.current = mergeJoins([
+        ...displayConfig.config.columns.map((c) => c.joins),
+        ...Object.values(displayConfig.config.header.elements).reduce((c: IFormJoin[], el) => {
+          if (el.props && 'filter' in el.props && Array.isArray(el.props.filter?.joins)) {
+            return [...c, el.props.filter.joins]
+          }
+          return c
+        }, []),
+      ])
+      if (Array.isArray(displayConfig.config.columns))
+        dataProjectRef.current = displayConfig.config.columns.reduce((curr, c) => {
+          if (!c.key) return curr
+
+          return { ...curr, [getProjectionKey(c.key)]: `$${c.key}` }
+        }, {})
+
+      setListLayoutConfig({
+        configForFormId: baseFormId,
+        dataListConfig: {
+          ...displayConfig.config,
+          columns: displayConfig.config.columns.map((c) => (c.key ? { ...c, key: getProjectionKey(c.key) } : c)),
+        },
+      })
+
+      fetchDataList()
+    }
 
     return () => {
-      cancel()
       reportDataApiCancelFuncRef.current?.()
     }
-  }, [baseFormId, displayConfigId, formDataId, fetchDataList])
+  }, [cachedConfig, displayConfigId, formDataId, fetchDataList])
 
   const dataListHeaderContext = {
     detailPageFormId: formId,
@@ -156,9 +149,9 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
       updateDataList={(filter) => {
         fetchDataList(filter.match)
       }}
-      parentLoadings={loadings}
+      parentLoadings={{ data: loading, initial: isConfigLoading }}
       loadingBlock={<FormDataListSkeleton_Table small />}
-      setParentLoading={(bool) => setLoadings((c) => ({ ...c, data: bool }))}
+      setParentLoading={(bool) => setLoading(bool)}
       headerLayoutContext={dataListHeaderContext}
     />
   )

package/src/constants.ts

@@ -1,4 +1,6 @@
-import { CountryEnum, CSSLayoutType, DeviceBreakpointEnum } from './enums'
+import { QueryClient } from '@tanstack/react-query'
+import { CountryEnum, CSSLayoutType, DeviceBreakpointEnum, FormDataListViewTypeEnum } from './enums'
+import { IFormSchema } from './types'
 
 export const CLIENT_ID = 'admin'
 export const CLIENT_SECRET = '3e9e418c-8bd7-4128-90c2-8db3e586a283'
@@ -170,3 +172,22 @@ export const BSON_DATA_IDENTIFIER_PREFIXES = {
   Date: 'Date__',
   Number: 'Number__',
 }
+export const DEFAULT_FORM_SCHEMA_DATA: IFormSchema = {
+  detailsConfig: { elements: {}, layouts: { [DeviceBreakpointEnum.Default]: [] } },
+  dataListConfig: {
+    listType: FormDataListViewTypeEnum.Table,
+    columns: [],
+    header: { elements: {}, layouts: { [DeviceBreakpointEnum.Default]: [] } },
+  },
+  generateConfig: { submissionPdf: { enabled: false } },
+  relationships: [],
+}
+export const REACT_QUERY_CLIENT = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 10 * 60 * 60 * 1000, // 10 hours
+      // refetchOnWindowFocus: true,
+      refetchOnMount: 'always',
+    },
+  },
+})

package/src/enums/form.enum.ts

@@ -198,7 +198,7 @@ export enum ReadFieldDataValueTypeEnum {
   Default = 'Default',
   Evaluated = 'Evaluated',
 }
-export enum BreadcrumbTypeEnum {
+export enum PageViewTypEnum {
   Details = 1,
   List,
   New,

package/src/types/companies/site-layout/authenticated/index.tsx

@@ -9,7 +9,8 @@ import * as FaIcons from 'react-icons/fa'
 import { cookieHandler } from '../../../../functions/cookie-handler'
 import { UserAuth } from '../../../../api/user'
 import { useBreadcrumb } from '../../../../components/common/custom-hooks/use-breadcrumb.hook'
-import { BreadcrumbTypeEnum } from '../../../../enums'
+import { PageViewTypEnum } from '../../../../enums'
+import { REACT_QUERY_CLIENT } from '../../../../constants'
 
 const { Header, Content, Sider } = Layout
 
@@ -26,6 +27,7 @@ export const useMenuItems = () => {
       icon: FaIcons.FaKey,
       onClick: async () => {
         await cookieHandler.empty()
+        REACT_QUERY_CLIENT.clear()
         localStorage.clear()
         navigate('/login')
       },
@@ -492,7 +494,7 @@ export const layoutTemplates = [
               onClick={() => {
                 reset()
                 const splittedFormName = form.name.split(' ')?.[0] ?? ''
-                push({ label: splittedFormName, href, type: BreadcrumbTypeEnum.List })
+                push({ label: splittedFormName, href, type: PageViewTypEnum.List })
 
                 if (isParentMenu) toggleMenu(form.id)
               }}

package/src/types/forms/index.ts

@@ -10,6 +10,16 @@ import { IFormRelationshipConfig } from './relationship'
 import { IButtonElementProps } from './layout-elements'
 import { IDndLayoutStructure_Responsive } from '..'
 
+export interface IFormConfigDetails {
+  description: string
+  id: number
+  isUser: boolean
+  keepVersionHistory: boolean
+  key: string
+  name: string
+  order: number
+  version: number
+}
 export interface IFormSchema {
   isRelationshipForm?: boolean
   detailsConfig: IDndLayoutStructure_Responsive