8 changed files with 152 additions and 317 deletions
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@ -475,67 +475,6 @@ body {
 .ant-spin-blur {
  filter: blur(3px);
 }
-
-.spin {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-primary);
-  font-size: 20px;
-  line-height: 1;
-}
-
-.spin-nested {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  flex: 1;
-}
-
-.spin-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  flex: 1;
-  transition: opacity 0.3s;
-}
-
-.spin-content.is-spinning {
-  filter: blur(3px);
-  opacity: 0.5;
-  user-select: none;
-  pointer-events: none;
-}
-
-.spin-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 4;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-primary);
-  font-size: 20px;
-  pointer-events: none;
-}
-
-.spin.spin-sm,
-.spin-nested.spin-sm .spin-overlay {
-  font-size: 14px;
-}
-
-.spin.spin-lg,
-.spin-nested.spin-lg .spin-overlay {
-  font-size: 32px;
-}
 /* --- End of src/index.css --- */

 /* --- Start of src/components/Dashboard/Layout.css --- */
@ -1438,6 +1377,26 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
  flex-direction: column;
 }

+.objectTableCardsContainer > .ant-spin-nested-loading,
+.objectTableCardsContainer > .ant-spin-nested-loading > .ant-spin-container,
+.objectTableCardsContainer .ant-spin-nested-loading {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.objectTableCardsContainer .ant-spin-container {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .objectKanbanContainerWrapper {
  position: relative;
  width: 100%;
@ -1448,6 +1407,15 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
  flex-direction: column;
 }

+.objectKanbanContainerWrapper > .ant-spin-nested-loading,
+.objectKanbanContainerWrapper > .ant-spin-nested-loading > .ant-spin-container {
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .objectKanbanContainerSkeletons {
  display: flex;
  flex-direction: column;
@ -1481,8 +1449,12 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
  height: 100%;
  min-width: 0;
  min-height: 0;
-  display: flex;
-  flex-direction: column;
+}
+
+.objectKanbanWrap > .ant-spin-nested-loading,
+.objectKanbanWrap > .ant-spin-nested-loading > .ant-spin-container {
+  height: 100%;
+  min-height: 0;
 }

 .objectKanbanScroll {
--- a/src/components/Dashboard/common/LoadingPlaceholder.jsx
+++ b/src/components/Dashboard/common/LoadingPlaceholder.jsx
@ -4,29 +4,13 @@ import PropTypes from 'prop-types'

 const { Text } = Typography

-const LoadingPlaceholder = ({
-  message,
-  hasBackground = true,
-  hasBorder = true,
-  height = undefined
-}) => {
+const LoadingPlaceholder = ({ message, hasBackground = true }) => {
  return (
    <Card
      size='small'
      style={{
        background: hasBackground == false ? 'transparent' : undefined,
-
-        border:
-          hasBackground == false && hasBorder == false
-            ? '1px solid rgb(0 0 0 / 7%)'
-            : hasBackground == true && hasBorder == false
-              ? 'none'
-              : undefined
-      }}
-      styles={{
-        body: {
-          height: height == undefined ? undefined : height
-        }
+        border: hasBackground == false ? '1px solid rgb(0 0 0 / 7%)' : undefined
      }}
    >
      <Flex
@ -48,9 +32,7 @@ const LoadingPlaceholder = ({

 LoadingPlaceholder.propTypes = {
  message: PropTypes.string.isRequired,
-  hasBackground: PropTypes.bool,
-  hasBorder: PropTypes.bool,
-  height: PropTypes.string
+  hasBackground: PropTypes.bool
 }

 export default LoadingPlaceholder
--- a/src/components/Dashboard/common/ObjectCard.jsx
+++ b/src/components/Dashboard/common/ObjectCard.jsx
@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import ObjectProperty from './ObjectProperty'
 import { createElement } from 'react'
 import Thumbnail from './Thumbnail'
-import { LoadingOutlined } from '@ant-design/icons'

 const ObjectCard = ({
  isSkeleton = false,
@ -14,7 +13,6 @@ const ObjectCard = ({
  isEditing = false,
  rowActions = [],
  renderActions,
-  lazyLoading = false,
  cardStyle = 'borderless'
 }) => {
  const descriptionItems = []
@ -61,7 +59,7 @@ const ObjectCard = ({
  var actions = undefined

  if (rowActions.length > 0) {
-    actions = renderActions(record, lazyLoading)
+    actions = renderActions(record)
  }

  const primaryDescriptionItems = thumbnailPresent
@ -148,21 +146,9 @@ const ObjectCard = ({
          {actions && (
            <>
              <Divider style={{ margin: '4px 0 0 0' }} />
-
-              <Flex
-                align='center'
-                gap={10}
-                style={{ width: '100%' }}
-                justify='space-between'
-              >
-                <Flex align='center' gap={10}>
+              <Flex align='flex-end' gap={10}>
                {actions}
              </Flex>
-
-                {lazyLoading && (
-                  <LoadingOutlined spin style={{ marginRight: 4 }} />
-                )}
-              </Flex>
            </>
          )}
        </Flex>
@ -180,8 +166,7 @@ ObjectCard.propTypes = {
  rowActions: PropTypes.array,
  renderActions: PropTypes.func.isRequired,
  cardStyle: PropTypes.string,
-  isSkeleton: PropTypes.bool,
-  lazyLoading: PropTypes.bool
+  isSkeleton: PropTypes.bool
 }

 export default ObjectCard
--- a/src/components/Dashboard/common/ObjectKanban.jsx
+++ b/src/components/Dashboard/common/ObjectKanban.jsx
@ -8,14 +8,14 @@ import {
  useRef,
  useState
 } from 'react'
-import { Empty, Flex } from 'antd'
+import { Empty, Flex, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import PropTypes from 'prop-types'
 import { ApiServerContext } from '../context/ApiServerContext'
 import ObjectCard from './ObjectCard'
 import ObjectKanbanColumn from './ObjectKanbanColumn'
 import ObjectKanbanHeader from './ObjectKanbanHeader'
 import ScrollBox from './ScrollBox'
-import Spin from './Spin'
 import { getCategoryValueKey } from './viewModeUtils'

 const KANBAN_COLUMN_WIDTH = 360
@ -101,7 +101,6 @@ const ObjectKanban = forwardRef(
      baseFilter = {},
      masterFilter = {},
      sorter = {},
-      lazyLoading = false,
      pageSize = 25,
      model,
      modelProperties,
@ -312,7 +311,11 @@ const ObjectKanban = forwardRef(

    return (
      <div className='objectKanbanContainerWrapper'>
-        <Spin spinning={showSkeleton}>
+        <Spin
+          indicator={<LoadingOutlined />}
+          spinning={showSkeleton}
+          style={{ height: '100%', flex: 1, minHeight: 0 }}
+        >
          <div className='objectKanbanContainerSkeletons'>
            <ObjectKanbanHeader
              categoryValues={categoryValues}
@ -322,7 +325,6 @@ const ObjectKanban = forwardRef(
              skeletonColumnCount={
                showSkeleton ? skeletonLayout.columnCount : 0
              }
-              lazyLoading={showSkeleton || lazyLoading}
            />
            <div className='objectKanbanKanbanBody' ref={kanbanBodyRef}>
              {!showSkeleton && (
@ -412,7 +414,6 @@ ObjectKanban.propTypes = {
  baseFilter: PropTypes.object,
  masterFilter: PropTypes.object,
  sorter: PropTypes.object,
-  lazyLoading: PropTypes.bool,
  pageSize: PropTypes.number,
  model: PropTypes.object.isRequired,
  modelProperties: PropTypes.array.isRequired,
--- a/src/components/Dashboard/common/ObjectKanbanColumn.jsx
+++ b/src/components/Dashboard/common/ObjectKanbanColumn.jsx
@ -9,11 +9,11 @@ import {
  useRef,
  useState
 } from 'react'
-import { Flex } from 'antd'
+import { Flex, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import PropTypes from 'prop-types'
 import { ApiServerContext } from '../context/ApiServerContext'
 import ObjectCard from './ObjectCard'
-import Spin from './Spin'
 import { toCategoryFilterValue } from './viewModeUtils'

 const SCROLL_THRESHOLD = 50
@ -33,7 +33,6 @@ const ObjectKanbanColumn = forwardRef(
      visibleColumns = {},
      isEditing = false,
      rowActions = [],
-      lazyLoading = false,
      renderActions,
      scrollElement = null
    },
@ -359,8 +358,7 @@ const ObjectKanbanColumn = forwardRef(
      [loadBoundaryPage]
    )

-    const loadInitialPage = useCallback(
-      async ({ silent = false } = {}) => {
+    const loadInitialPage = useCallback(async ({ silent = false } = {}) => {
      dataLoadGenerationRef.current += 1
      loadingPagesRef.current.clear()
      pendingScrollAnchorRef.current = null
@ -405,8 +403,7 @@ const ObjectKanbanColumn = forwardRef(
          setLoading(false)
        }
      }
-      },
-      [
+    }, [
      categoryProperty,
      categoryValue,
      createPageWindow,
@ -414,8 +411,7 @@ const ObjectKanbanColumn = forwardRef(
      fetchPage,
      isStaleDataLoad,
      setTablePages
-      ]
-    )
+    ])

    const reloadLoadedPages = useCallback(async () => {
      const loadedPages = pagesRef.current.filter(
@ -505,7 +501,7 @@ const ObjectKanbanColumn = forwardRef(
    return (
      <Flex vertical className='objectKanbanColumn'>
        <div className='objectKanbanColumnCards' ref={containerRef}>
-          <Spin spinning={loading}>
+          <Spin indicator={<LoadingOutlined />} spinning={loading}>
            <Flex
              vertical
              gap='middle'
@ -537,7 +533,6 @@ const ObjectKanbanColumn = forwardRef(
                      rowActions={rowActions}
                      renderActions={renderActions}
                      cardStyle='bordered'
-                      lazyLoading={lazyLoading}
                    />
                  </div>
                )
@ -565,7 +560,6 @@ ObjectKanbanColumn.propTypes = {
  visibleColumns: PropTypes.object,
  isEditing: PropTypes.bool,
  rowActions: PropTypes.array,
-  lazyLoading: PropTypes.bool,
  renderActions: PropTypes.func,
  scrollElement: PropTypes.object
 }
--- a/src/components/Dashboard/common/ObjectKanbanHeader.jsx
+++ b/src/components/Dashboard/common/ObjectKanbanHeader.jsx
@ -2,22 +2,20 @@ import { Flex, Skeleton } from 'antd'
 import PropTypes from 'prop-types'
 import ObjectProperty from './ObjectProperty'
 import { getCategoryValueKey } from './viewModeUtils'
-import { LoadingOutlined } from '@ant-design/icons'

 const ObjectKanbanHeader = ({
  categoryValues,
  categoryProperty,
  categoryPropertyDef,
  trackRef,
-  skeletonColumnCount = 0,
-  lazyLoading = false
+  skeletonColumnCount = 0
 }) => {
  const showSkeleton = skeletonColumnCount > 0

  return (
    <div className='objectKanbanHeader'>
      <div className='objectKanbanHeaderTrack' ref={trackRef}>
-        <Flex gap='middle' className='objectKanbanHeaderRow' align='center'>
+        <Flex gap='middle' className='objectKanbanHeaderRow'>
          {showSkeleton
            ? Array.from({ length: skeletonColumnCount }).map((_, index) => (
                <div
@ -34,13 +32,7 @@ const ObjectKanbanHeader = ({
            : categoryValues.map((categoryValue) => {
                const columnKey = getCategoryValueKey(categoryValue)
                return (
-                  <Flex
-                    key={columnKey}
-                    className='objectKanbanHeaderCell'
-                    align='center'
-                    justify='space-between'
-                    gap={8}
-                  >
+                  <div key={columnKey} className='objectKanbanHeaderCell'>
                    {categoryPropertyDef ? (
                      <ObjectProperty
                        {...categoryPropertyDef}
@ -49,13 +41,7 @@ const ObjectKanbanHeader = ({
                        name={categoryProperty}
                      />
                    ) : null}
-                    {lazyLoading && (
-                      <LoadingOutlined
-                        spin
-                        style={{ flexShrink: 0, marginRight: 6 }}
-                      />
-                    )}
-                  </Flex>
+                  </div>
                )
              })}
        </Flex>
@ -71,8 +57,7 @@ ObjectKanbanHeader.propTypes = {
  categoryProperty: PropTypes.string.isRequired,
  categoryPropertyDef: PropTypes.object,
  trackRef: PropTypes.object,
-  skeletonColumnCount: PropTypes.number,
-  lazyLoading: PropTypes.bool
+  skeletonColumnCount: PropTypes.number
 }

 export default ObjectKanbanHeader
--- a/src/components/Dashboard/common/ObjectTable.jsx
+++ b/src/components/Dashboard/common/ObjectTable.jsx
@ -15,6 +15,7 @@ import {
  Row,
  Col,
  Flex,
+  Spin,
  Button,
  Space,
  Form,
@ -46,7 +47,6 @@ import { useActions } from '../context/ActionsContext'
 import ActionsIcon from '../../Icons/ActionsIcon'
 import FilterIcon from '../../Icons/FilterIcon'
 import ScrollBox from './ScrollBox'
-import Spin from './Spin'
 import SimplePropertyFilter from './SimplePropertyFilter'
 import QuickPropertyFilters from './QuickPropertyFilters'
 import FilterInput from './FilterInput'
@ -60,7 +60,6 @@ import Tooltip from './Tooltip'
 import { ObjectTableFilterContext } from './ObjectTableFilterContext'
 import ObjectListViewContext from '../context/ObjectListViewContext'
 import { isCardsView, isKanbanView, normalizeViewMode } from './viewModeUtils'
-import LoadingPlaceholder from './LoadingPlaceholder'

 const logger = loglevel.getLogger('DasboardTable')
 logger.setLevel(config.logLevel)
@ -564,7 +563,7 @@ const ObjectTable = forwardRef(
      )
    }, [])

-    const renderActions = (objectData, actionsDisabled = false) => {
+    const renderActions = (objectData) => {
      return (
        <Flex gap='small' align='center' justify='center'>
          {rowActions.map((action, index) => {
@ -577,10 +576,9 @@ const ObjectTable = forwardRef(
                  action.disabled({
                    ...objectData,
                    _user: userProfile
-                  }) ||
-                  actionsDisabled
+                  })
              } else {
-                disabled = denied || action.disabled || actionsDisabled
+                disabled = denied || action.disabled
              }
            }
            return (
@ -1177,10 +1175,8 @@ const ObjectTable = forwardRef(

          if (!silent) {
            setLoading(true)
-            setLazyLoading(false)
          } else {
            setLoading(false)
-            setLazyLoading(true)
          }
          try {
            let loadKanban = kanbanRef.current?.load
@ -1195,12 +1191,8 @@ const ObjectTable = forwardRef(
          } catch (error) {
            logger.error('Error loading kanban view:', error)
          } finally {
-            if (generation === dataLoadGenerationRef.current) {
-              if (!silent) {
+            if (!silent && generation === dataLoadGenerationRef.current) {
              setLoading(false)
-              } else {
-                setLazyLoading(false)
-              }
            }
          }
          return
@ -1212,7 +1204,6 @@ const ObjectTable = forwardRef(
          loadingPagesRef.current.clear()
          pendingScrollAnchorRef.current = null
          setLoading(false)
-          setLazyLoading(true)

          try {
            const firstResult = await fetchPage(pageNum, filter, sorter)
@ -1233,10 +1224,6 @@ const ObjectTable = forwardRef(
            if (!isStaleDataLoad(generation)) {
              logger.error(`Error loading page ${pageNum}:`, error)
            }
-          } finally {
-            if (!isStaleDataLoad(generation)) {
-              setLazyLoading(false)
-            }
          }
          return
        }
@ -1248,7 +1235,6 @@ const ObjectTable = forwardRef(
        const skeletonPage = createSkeletonPage(pageNum)
        setTablePages([skeletonPage])
        setLoading(true)
-        setLazyLoading(false)
        if (isStaleDataLoad(generation)) return

        try {
@ -1984,7 +1970,6 @@ const ObjectTable = forwardRef(
                            modelProperties={modelProperties}
                            visibleColumns={visibleColumns}
                            record={record}
-                            lazyLoading={lazyLoading}
                            isEditing={isEditing}
                            rowActions={rowActions}
                            renderActions={renderActions}
@ -1996,14 +1981,6 @@ const ObjectTable = forwardRef(
                )
              })}
            </Row>
-            {lazyLoading && tableData.length <= 0 && (
-              <LoadingPlaceholder
-                message='Loading, please wait...'
-                hasBackground={true}
-                hasBorder={false}
-                height='260px'
-              />
-            )}
          </div>
        </ScrollBox>
      )
@ -2045,7 +2022,11 @@ const ObjectTable = forwardRef(
          <Splitter.Panel>
            {isKanban ? (
              <div className='objectKanbanWrap'>
-                <Spin spinning={loading}>
+                <Spin
+                  indicator={<LoadingOutlined />}
+                  spinning={loading}
+                  style={{ height: '100%' }}
+                >
                  <ObjectKanban
                    ref={kanbanRef}
                    type={type}
@ -2053,7 +2034,6 @@ const ObjectTable = forwardRef(
                    baseFilter={effectiveFilter}
                    masterFilter={resolvedMasterFilter}
                    sorter={effectiveSorter}
-                    lazyLoading={lazyLoading}
                    pageSize={pageSize}
                    model={model}
                    modelProperties={modelProperties}
@ -2069,10 +2049,20 @@ const ObjectTable = forwardRef(
                className='objectTableCardsContainer'
                ref={objectTableCardsContainerRef}
              >
-                <Spin spinning={loading}>{renderCards()}</Spin>
+                <Spin
+                  indicator={<LoadingOutlined />}
+                  spinning={loading}
+                  style={{
+                    height: '300px',
+                    flex: 1,
+                    minHeight: 0,
+                    width: '100%'
+                  }}
+                >
+                  {renderCards()}
+                </Spin>
              </div>
            ) : (
-              <Spin spinning={loading}>
              <Table
                key={tableListKey}
                ref={tableRef}
@ -2082,6 +2072,10 @@ const ObjectTable = forwardRef(
                pagination={false}
                scroll={{ y: adjustedScrollHeight }}
                rowKey='_id'
+                loading={{
+                  spinning: loading,
+                  indicator: <LoadingOutlined spin />
+                }}
                onScroll={handleScroll}
                onChange={handleTableChange}
                showSorterTooltip={false}
@ -2090,7 +2084,6 @@ const ObjectTable = forwardRef(
                components={components}
                onRow={onRow}
              />
-              </Spin>
            )}
          </Splitter.Panel>
          {(showSortSidebar || showFilterSidebar) && (
--- a/src/components/Dashboard/common/Spin.jsx
+++ b/src/components/Dashboard/common/Spin.jsx
@ -1,77 +0,0 @@
-import PropTypes from 'prop-types'
-import { LoadingOutlined } from '@ant-design/icons'
-
-const SIZE_CLASS = {
-  small: 'spin-sm',
-  default: '',
-  large: 'spin-lg'
-}
-
-const DEFAULT_INDICATOR = (
-  <LoadingOutlined spin style={{ color: 'var(--color-primary)' }} />
-)
-
-const Spin = ({
-  spinning = true,
-  children,
-  indicator = DEFAULT_INDICATOR,
-  size = 'default',
-  style,
-  className
-}) => {
-  const sizeClass = SIZE_CLASS[size] ?? ''
-
-  if (children == null) {
-    if (!spinning) return null
-
-    return (
-      <div
-        className={['spin', sizeClass, className].filter(Boolean).join(' ')}
-        style={style}
-        role='status'
-        aria-live='polite'
-      >
-        {indicator}
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className={[
-        'spin-nested',
-        spinning ? 'is-spinning' : null,
-        sizeClass,
-        className
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {spinning && (
-        <div className='spin-overlay' role='status' aria-live='polite'>
-          {indicator}
-        </div>
-      )}
-      <div
-        className={['spin-content', spinning ? 'is-spinning' : null]
-          .filter(Boolean)
-          .join(' ')}
-        aria-busy={spinning}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-Spin.propTypes = {
-  spinning: PropTypes.bool,
-  children: PropTypes.node,
-  indicator: PropTypes.node,
-  size: PropTypes.oneOf(['small', 'default', 'large']),
-  style: PropTypes.object,
-  className: PropTypes.string
-}
-
-export default Spin