From bcb7460bf2e9feea81f4f6331cea811e9acbc513 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 22 Aug 2026 21:16:21 +0100
Subject: [PATCH] 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.
---
 .../Finance/Invoices/InvoiceInfo.jsx          | 11 ++++++---
 .../Finance/Payments/PaymentInfo.jsx          | 11 ++++++---
 .../Finance/TaxRecords/TaxRecordInfo.jsx      | 12 +++++++---
 .../FilamentStocks/FilamentStockInfo.jsx      | 12 +++++++---
 .../Inventory/OrderItems/OrderItemInfo.jsx    | 11 ++++++---
 .../Inventory/PartStocks/PartStockInfo.jsx    | 11 ++++++---
 .../ProductStocks/ProductStockInfo.jsx        | 11 ++++++---
 .../PurchaseOrders/PurchaseOrderInfo.jsx      | 11 ++++++---
 .../Inventory/Shipments/PurchaseOrderInfo.jsx | 11 ++++++---
 .../Inventory/Shipments/ShipmentInfo.jsx      | 11 ++++++---
 .../Inventory/StockAudits/StockAuditInfo.jsx  | 11 ++++++---
 .../StockLocations/StockLocationInfo.jsx      | 11 ++++++---
 .../StockTransfers/StockTransferInfo.jsx      | 11 ++++++---
 .../CourierServices/CourierServiceInfo.jsx    | 12 +++++++---
 .../Management/Couriers/CourierInfo.jsx       | 12 +++++++---
 .../DocumentJobs/DocumentJobInfo.jsx          | 11 ++++++---
 .../DocumentPrinters/DocumentPrinterInfo.jsx  | 23 +++++++++++--------
 .../DocumentSizes/DocumentSizeInfo.jsx        | 11 ++++++---
 .../DocumentTemplateDesign.jsx                | 12 +++++++---
 .../DocumentTemplateInfo.jsx                  | 11 ++++++---
 .../FilamentSkus/FilamentSkuInfo.jsx          | 12 +++++++---
 .../Management/Filaments/FilamentInfo.jsx     | 11 ++++++---
 .../Dashboard/Management/Files/FileInfo.jsx   | 12 +++++++---
 .../Dashboard/Management/Hosts/HostInfo.jsx   | 11 ++++++---
 .../Management/Materials/MaterialInfo.jsx     | 12 +++++++---
 .../Dashboard/Management/Notes/NoteInfo.jsx   | 11 ++++++---
 .../Management/PartSkus/PartSkuInfo.jsx       | 12 +++++++---
 .../Dashboard/Management/Parts/PartInfo.jsx   | 12 +++++++---
 .../PermissionSettingInfo.jsx                 |  9 ++++++--
 .../ProductCategories/ProductCategoryInfo.jsx | 12 +++++++---
 .../Management/ProductSkus/ProductSkuInfo.jsx | 12 +++++++---
 .../Management/Products/ProductInfo.jsx       | 12 +++++++---
 .../Management/TaxRates/TaxRateInfo.jsx       | 12 +++++++---
 .../Management/UserGroups/UserGroupInfo.jsx   |  9 ++++++--
 .../Dashboard/Management/Users/UserInfo.jsx   |  9 ++++++--
 .../Management/Vendors/VendorInfo.jsx         | 12 +++++++---
 .../FilamentProfiles/FilamentProfileInfo.jsx  | 11 ++++++---
 .../Production/GCodeFiles/GCodeFileInfo.jsx   | 11 ++++++---
 .../GCodeFiles/GCodeFilePreview.jsx           | 12 +++++++---
 .../Dashboard/Production/Jobs/JobInfo.jsx     | 11 ++++++---
 .../PrinterProfiles/PrinterProfileInfo.jsx    | 11 ++++++---
 .../Production/Printers/ControlPrinter.jsx    | 12 +++++++---
 .../Production/Printers/PrinterInfo.jsx       | 11 ++++++---
 .../Production/SubJobs/SubJobInfo.jsx         | 11 ++++++---
 .../Dashboard/Sales/Clients/ClientInfo.jsx    | 12 +++++++---
 .../ListingVarients/ListingVarientInfo.jsx    | 12 +++++++---
 .../Dashboard/Sales/Listings/ListingInfo.jsx  | 12 +++++++---
 .../Sales/Marketplaces/MarketplaceInfo.jsx    | 12 +++++++---
 .../Sales/SalesOrders/SalesOrderInfo.jsx      | 11 ++++++---
 49 files changed, 416 insertions(+), 150 deletions(-)

diff --git a/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx b/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
index 64edc6f8..15adcb90 100644
--- a/src/components/Dashboard/Finance/Invoices/InvoiceInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx b/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
index 31503971..32d4ab13 100644
--- a/src/components/Dashboard/Finance/Payments/PaymentInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx b/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
index 4b86aa65..d56a9fda 100644
--- a/src/components/Dashboard/Finance/TaxRecords/TaxRecordInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
index ec2ff160..5fc4105a 100644
--- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx b/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
index 52491635..66752c7e 100644
--- a/src/components/Dashboard/Inventory/OrderItems/OrderItemInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx b/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
index 914aa0bb..fc00668c 100644
--- a/src/components/Dashboard/Inventory/PartStocks/PartStockInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx b/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
index 99ae075f..be497362 100644
--- a/src/components/Dashboard/Inventory/ProductStocks/ProductStockInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx b/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
index 51c6583d..387d956b 100644
--- a/src/components/Dashboard/Inventory/PurchaseOrders/PurchaseOrderInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx b/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
index 9a0d832d..b935d342 100644
--- a/src/components/Dashboard/Inventory/Shipments/PurchaseOrderInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx b/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
index 95bfd1a3..9daed29f 100644
--- a/src/components/Dashboard/Inventory/Shipments/ShipmentInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx b/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
index 0bed2d67..9e22b45f 100644
--- a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx b/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
index c7f6aa6f..5bad2e5f 100644
--- a/src/components/Dashboard/Inventory/StockLocations/StockLocationInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx b/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
index e8830c38..404e1e4d 100644
--- a/src/components/Dashboard/Inventory/StockTransfers/StockTransferInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx b/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
index 0503d4a8..ceda405b 100644
--- a/src/components/Dashboard/Management/CourierServices/CourierServiceInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/Couriers/CourierInfo.jsx b/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
index 1c7a8ae0..92603b9f 100644
--- a/src/components/Dashboard/Management/Couriers/CourierInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
index 86a41d56..dd371c83 100644
--- a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx b/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
index 01e7f7df..0d027039 100644
--- a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
+++ b/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>
-                <NotesPanel _id={documentPrinterId} type='documentPrinter' />
-              </Card>
+              <Spin
+                spinning={objectFormState.loading}
+                indicator={<LoadingOutlined />}
+              >
+                <Card>
+                  <NotesPanel _id={documentPrinterId} type='documentPrinter' />
+                </Card>
+              </Spin>
             </InfoCollapse>
 
             <InfoCollapse
@@ -224,10 +229,10 @@ const DocumentPrinterInfo = () => {
                 <ObjectTable
                   type='auditLog'
                   masterFilter={{
-                      parent:
-                        getModelByName('documentPrinter').prefix +
-                        ':' +
-                        documentPrinterId
+                    parent:
+                      getModelByName('documentPrinter').prefix +
+                      ':' +
+                      documentPrinterId
                   }}
                   visibleColumns={{ _id: false, parent: false }}
                 />
diff --git a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
index 1c0bfbbc..c5912fb1 100644
--- a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
index f713806b..8239ea34 100644
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
+++ b/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>
diff --git a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
index 3c4212fb..616406dc 100644
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx b/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
index ab4b5990..301a04bf 100644
--- a/src/components/Dashboard/Management/FilamentSkus/FilamentSkuInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
index 7fc7dff8..7fc26a02 100644
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Management/Files/FileInfo.jsx b/src/components/Dashboard/Management/Files/FileInfo.jsx
index 781ad24f..4195c63f 100644
--- a/src/components/Dashboard/Management/Files/FileInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/Hosts/HostInfo.jsx b/src/components/Dashboard/Management/Hosts/HostInfo.jsx
index 4df4fd47..c636005a 100644
--- a/src/components/Dashboard/Management/Hosts/HostInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Management/Materials/MaterialInfo.jsx b/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
index da7ebdd1..2fbe0c0f 100644
--- a/src/components/Dashboard/Management/Materials/MaterialInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/Notes/NoteInfo.jsx b/src/components/Dashboard/Management/Notes/NoteInfo.jsx
index b36c139d..84ab9e28 100644
--- a/src/components/Dashboard/Management/Notes/NoteInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx b/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
index ed7d05f1..8caf8b00 100644
--- a/src/components/Dashboard/Management/PartSkus/PartSkuInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/Parts/PartInfo.jsx b/src/components/Dashboard/Management/Parts/PartInfo.jsx
index d485d854..363fb058 100644
--- a/src/components/Dashboard/Management/Parts/PartInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx b/src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx
index c6bfe75e..2771e5bb 100644
--- a/src/components/Dashboard/Management/PermissionSettings/PermissionSettingInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx b/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
index c041e98d..af2a9b2a 100644
--- a/src/components/Dashboard/Management/ProductCategories/ProductCategoryInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx b/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
index a39eaae2..3de9a307 100644
--- a/src/components/Dashboard/Management/ProductSkus/ProductSkuInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/Products/ProductInfo.jsx b/src/components/Dashboard/Management/Products/ProductInfo.jsx
index d64736c6..7a1b75a4 100644
--- a/src/components/Dashboard/Management/Products/ProductInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx b/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
index c3b0b289..f59483de 100644
--- a/src/components/Dashboard/Management/TaxRates/TaxRateInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx b/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
index b871c97c..484bb580 100644
--- a/src/components/Dashboard/Management/UserGroups/UserGroupInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/Users/UserInfo.jsx b/src/components/Dashboard/Management/Users/UserInfo.jsx
index 60eeb870..3105e75b 100644
--- a/src/components/Dashboard/Management/Users/UserInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
index 7c26d66f..270e5df9 100644
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx b/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
index d9f00d6e..807aaef1 100644
--- a/src/components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
index 2d1e3382..a4372634 100644
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx b/src/components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx
index 99afd4bf..9e2e718e 100644
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFilePreview.jsx
+++ b/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>
diff --git a/src/components/Dashboard/Production/Jobs/JobInfo.jsx b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
index 24d74b58..23403e3e 100644
--- a/src/components/Dashboard/Production/Jobs/JobInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx b/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
index fd027b9a..a122fd99 100644
--- a/src/components/Dashboard/Production/PrinterProfiles/PrinterProfileInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
index 5582a3a3..7e52b8b3 100644
--- a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
+++ b/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>
diff --git a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
index 9af2e305..5562cca9 100644
--- a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
+++ b/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
diff --git a/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx b/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
index b3526ff5..9f355e68 100644
--- a/src/components/Dashboard/Production/SubJobs/SubJobInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Sales/Clients/ClientInfo.jsx b/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
index 4d280a1e..b0bd1bc5 100644
--- a/src/components/Dashboard/Sales/Clients/ClientInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx b/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
index 055dd655..236edd8c 100644
--- a/src/components/Dashboard/Sales/ListingVarients/ListingVarientInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Sales/Listings/ListingInfo.jsx b/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
index 0e9a3c47..390df921 100644
--- a/src/components/Dashboard/Sales/Listings/ListingInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx b/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
index e55e92e2..7c6fb37a 100644
--- a/src/components/Dashboard/Sales/Marketplaces/MarketplaceInfo.jsx
+++ b/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'
diff --git a/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx b/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
index 602c5fe3..13e62654 100644
--- a/src/components/Dashboard/Sales/SalesOrders/SalesOrderInfo.jsx
+++ b/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'