Enhance Loading State in Dashboard Components

- Added a loading spinner to various components including InvoiceInfo, PaymentInfo, TaxRecordInfo, and others to improve user experience during data fetching.
- Integrated Spin component from Ant Design with a LoadingOutlined icon to visually indicate loading states for notes sections across multiple dashboard components.
- Ensured consistent loading behavior across all relevant components, enhancing overall responsiveness and user feedback.

src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -269,9 +269,14 @@ const InvoiceInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={invoiceId} type='invoice' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Finance/Payments/PaymentInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -204,9 +204,14 @@ const PaymentInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={paymentId} type='payment' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -187,9 +188,14 @@ const TaxRecordInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={taxRecordId} type='taxRecord' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import ObjectForm from '../../common/ObjectForm'
 import ObjectInfo from '../../common/ObjectInfo'
@@ -226,9 +227,14 @@ const FilamentStockInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={filamentStockId} type='filamentStock' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -193,9 +193,14 @@ const OrderItemInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={orderItemId} type='orderItem' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -246,9 +246,14 @@ const PartStockInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={partStockId} type='partStock' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -276,9 +276,14 @@ const ProductStockInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={productStockId} type='productStock' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -309,9 +309,14 @@ const PurchaseOrderInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Modal, Space } from 'antd'
+import { Card, Flex, Modal, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -270,9 +270,14 @@ const PurchaseOrderInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -229,9 +229,14 @@ const ShipmentInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={shipmentId} type='shipment' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -202,9 +202,14 @@ const StockAuditInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={stockAuditId} type='stockAudit' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -200,9 +200,14 @@ const StockLocationInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={stockLocationId} type='stockLocation' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
 import NotesPanel from '../../common/NotesPanel.jsx'
@@ -227,9 +227,14 @@ const StockTransferInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={stockTransferId} type='stockTransfer' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -189,9 +190,14 @@ const CourierServiceInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={courierServiceId} type='courierService' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/Couriers/CourierInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -206,9 +207,14 @@ const CourierInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={courierId} type='courier' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -191,9 +191,14 @@ const DocumentJobInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={documentJobId} type='documentJob' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -99,7 +99,7 @@ const DocumentPrinterInfo = () => {
             <Space size='small'>
               <ObjectActions
                 type='documentPrinter'
-              pageName='info'
+                pageName='info'
                 id={documentPrinterId}
                 disabled={objectFormState.loading}
                 objectData={objectFormState.objectData}
@@ -204,9 +204,14 @@ const DocumentPrinterInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
-                <NotesPanel _id={documentPrinterId} type='documentPrinter' />
+                spinning={objectFormState.loading}
-              </Card>
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
+                  <NotesPanel _id={documentPrinterId} type='documentPrinter' />
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse
@@ -224,10 +229,10 @@ const DocumentPrinterInfo = () => {
                 <ObjectTable
                   type='auditLog'
                   masterFilter={{
-                      parent:
+                    parent:
-                        getModelByName('documentPrinter').prefix +
+                      getModelByName('documentPrinter').prefix +
-                        ':' +
+                      ':' +
-                        documentPrinterId
+                      documentPrinterId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />

src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -192,9 +192,14 @@ const DocumentSizeInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={documentSizeId} type='documentSize' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card } from 'antd'
+import { Space, Flex, Card, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -173,9 +174,14 @@ const DocumentTemplateDesign = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={documentTemplateId} type='documentTemplate' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
         </Flex>
       </ScrollBox>

src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -205,9 +205,14 @@ const DocumentTemplateInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={documentTemplateId} type='documentTemplate' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -184,9 +185,14 @@ const FilamentSkuInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={filamentSkuId} type='filamentSku' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/Filaments/FilamentInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
@@ -254,9 +254,14 @@ const FilamentInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={filamentId} type='filament' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

src/components/Dashboard/Management/Files/FileInfo.jsx

@@ -1,6 +1,7 @@
 import { useContext, useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -237,9 +238,14 @@ const FileInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={fileId} type='file' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/Hosts/HostInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -249,9 +249,14 @@ const HostInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={hostId} type='host' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

src/components/Dashboard/Management/Materials/MaterialInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -187,9 +188,14 @@ const MaterialInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={materialId} type='material' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/Notes/NoteInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -215,9 +215,14 @@ const NoteInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={noteId} type='note' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -179,9 +180,14 @@ const PartSkuInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={partSkuId} type='partSku' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/Parts/PartInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -209,9 +210,14 @@ const PartInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={partId} type='part' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx

@@ -222,12 +222,17 @@ const PermissionSettingInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel
                   _id={permissionSettingId}
                   type='permissionSetting'
                 />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -184,9 +185,14 @@ const ProductCategoryInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={productCategoryId} type='productCategory' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -211,9 +212,14 @@ const ProductSkuInfo = () => {
                 onToggle={(expanded) => updateCollapseState('notes', expanded)}
                 collapseKey='notes'
               >
-                <Card>
+                <Spin
+                  spinning={objectFormState.loading}
+                  indicator={<LoadingOutlined />}
+                >
+                  <Card>
                   <NotesPanel _id={productSkuId} type='productSku' />
-                </Card>
+                  </Card>
+                </Spin>
               </InfoCollapse>
               <InfoCollapse
                 title='Audit Logs'

src/components/Dashboard/Management/Products/ProductInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
 import InfoCollapse from '../../common/InfoCollapse'
@@ -216,9 +217,14 @@ const ProductInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={productId} type='product' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -184,9 +185,14 @@ const TaxRateInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={taxRateId} type='taxRate' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx

@@ -238,9 +238,14 @@ const UserGroupInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={userGroupId} type='userGroup' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Management/Users/UserInfo.jsx

@@ -259,9 +259,14 @@ const UserInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={userId} type='user' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Management/Vendors/VendorInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -184,9 +185,14 @@ const VendorInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={vendorId} type='vendor' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import ActionHandler from '../../common/ActionHandler'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
@@ -524,9 +524,14 @@ const FilamentProfileInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={filamentProfileId} type='filamentProfile' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -225,9 +225,14 @@ const GCodeFileInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={gcodeFileId} type='gcodeFile' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse

src/components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card } from 'antd'
+import { Space, Flex, Card, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -143,9 +144,14 @@ const GCodeFilePreview = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={gcodeFileId} type='gcodeFile' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
         </Flex>
       </ScrollBox>

src/components/Dashboard/Production/Jobs/JobInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -219,9 +219,14 @@ const JobInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={jobId} type='job' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import ActionHandler from '../../common/ActionHandler'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
@@ -375,9 +375,14 @@ const PrinterProfileInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={printerProfileId} type='printerProfile' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

src/components/Dashboard/Production/Printers/ControlPrinter.jsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useContext, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card, Splitter, Divider } from 'antd'
+import { Space, Flex, Card, Splitter, Divider, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.jsx'
@@ -620,9 +621,14 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={printerId} type='printer' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
           </Flex>
         </ScrollBox>

src/components/Dashboard/Production/Printers/PrinterInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -239,9 +239,14 @@ const PrinterInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={printerId} type='printer' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
 
           <InfoCollapse

src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import useCollapseState from '../../hooks/useCollapseState'
 import NotesPanel from '../../common/NotesPanel'
@@ -198,9 +198,14 @@ const SubJobInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={subJobId} type='subJob' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Sales/Clients/ClientInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -184,9 +185,14 @@ const ClientInfo = () => {
               onToggle={(expanded) => updateCollapseState('notes', expanded)}
               collapseKey='notes'
             >
-              <Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
                 <NotesPanel _id={clientId} type='client' />
-              </Card>
+                </Card>
+              </Spin>
             </InfoCollapse>
             <InfoCollapse
               title='Audit Logs'

src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -201,9 +202,14 @@ const ListingVarientInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={listingVarientId} type='listingVarient' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Sales/Listings/ListingInfo.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, Space } from 'antd'
+import { Card, Flex, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -219,9 +220,14 @@ const ListingInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={listingId} type='listing' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx

@@ -1,6 +1,7 @@
 import { useContext, useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Card, Flex, message, Space } from 'antd'
+import { Card, Flex, message, Space, Spin } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config'
 import useCollapseState from '../../hooks/useCollapseState'
@@ -265,9 +266,14 @@ const MarketplaceInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={marketplaceId} type='marketplace' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'

src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card } from 'antd'
+import { Space, Flex, Card, Spin } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
@@ -307,9 +307,14 @@ const SalesOrderInfo = () => {
             onToggle={(expanded) => updateCollapseState('notes', expanded)}
             collapseKey='notes'
           >
-            <Card>
+            <Spin
+              spinning={objectFormState.loading}
+              indicator={<LoadingOutlined />}
+            >
+              <Card>
               <NotesPanel _id={salesOrderId} type='salesOrder' />
-            </Card>
+              </Card>
+            </Spin>
           </InfoCollapse>
           <InfoCollapse
             title='Audit Logs'