Fixed skeleton bug

src/components/Dashboard/common/ObjectTable.jsx

@@ -45,7 +45,6 @@ const ObjectTable = forwardRef(
   (
     {
       type,
-      url,
       pageSize = 25,
       scrollHeight = 'calc(var(--unit-100vh) - 270px)',
       onDataChange,
@@ -57,7 +56,8 @@ const ObjectTable = forwardRef(
     ref
   ) => {
     const { authenticated } = useContext(AuthContext)
-    const { fetchTableData } = useContext(ApiServerContext)
+    const { fetchObjects, connected, subscribeToObject, subscribeToType } =
+      useContext(ApiServerContext)
     const isMobile = useMediaQuery({ maxWidth: 768 })
     const navigate = useNavigate()
     var adjustedScrollHeight = scrollHeight
@@ -135,9 +135,15 @@ const ObjectTable = forwardRef(
             order: sorter.order
           })
         }
-        console.log('filter 2', filter)
+        console.log('Fetching Objects', {
+          page: pageNum,
+          limit: pageSize,
+          filter: { ...filter, ...masterFilter },
+          sorter,
+          onDataChange
+        })
         try {
-          const result = await fetchTableData(type, {
+          const result = await fetchObjects(type, {
             page: pageNum,
             limit: pageSize,
             filter: { ...filter, ...masterFilter },
@@ -177,7 +183,15 @@ const ObjectTable = forwardRef(
           throw error
         }
       },
-      [url, pageSize, tableFilter, tableSorter, onDataChange, fetchTableData]
+      [
+        type,
+        masterFilter,
+        pageSize,
+        tableFilter,
+        tableSorter,
+        onDataChange,
+        fetchObjects
+      ]
     )
 
     const loadNextPage = useCallback(() => {
@@ -266,20 +280,81 @@ const ObjectTable = forwardRef(
     )
 
     const reload = useCallback(() => {
-      return fetchData(1)
-    }, [fetchData])
+      for (let i = 0; i < pages.length; i++) {
+        const page = pages[i]
+        fetchData(page.pageNum)
+      }
+    }, [fetchData, pages])
 
-    const updateData = useCallback((_id, updatedData) => {
+    // Update event handler for real-time updates
+    const updateEventHandler = useCallback((updatedData) => {
       setPages((prevPages) =>
         prevPages.map((page) => ({
           ...page,
           items: page.items.map((item) =>
-            item._id === _id ? { ...item, ...updatedData } : item
+            item._id === updatedData._id ? { ...item, ...updatedData } : item
           )
         }))
       )
     }, [])
 
+    const newEventHandler = useCallback(
+      (newData) => {
+        if (newData.type == type) {
+          reload()
+        }
+      },
+      [reload, type]
+    )
+
+    // Subscribe to real-time updates for all items
+    useEffect(() => {
+      if (pages.length > 0 && connected) {
+        const unsubscribes = []
+
+        // Subscribe to each item in all pages
+        pages.forEach((page) => {
+          page.items.forEach((item) => {
+            if (!item.isSkeleton) {
+              const unsubscribe = subscribeToObject(
+                item._id,
+                type,
+                updateEventHandler
+              )
+              if (unsubscribe) {
+                unsubscribes.push(unsubscribe)
+              }
+            }
+          })
+        })
+
+        return () => {
+          // Clean up all subscriptions
+          unsubscribes.forEach((unsubscribe) => {
+            if (unsubscribe) unsubscribe()
+          })
+        }
+      }
+    }, [pages, type, subscribeToObject, updateEventHandler, connected])
+
+    useEffect(() => {
+      if (connected == true) {
+        const unsubscribe = subscribeToType(type, newEventHandler)
+        return () => {
+          if (unsubscribe) {
+            unsubscribe()
+          }
+        }
+      }
+    }, [type, subscribeToType, connected, newEventHandler])
+
+    const updateData = useCallback(
+      (_id, updatedData) => {
+        updateEventHandler({ _id, ...updatedData })
+      },
+      [updateEventHandler]
+    )
+
     const loadPage = useCallback(
       async (pageNum, filter = null, sorter = null) => {
         // Create initial page with skeletons
@@ -288,10 +363,14 @@ const ObjectTable = forwardRef(
         const items = await fetchData(pageNum, filter, sorter)
 
         if (items.length >= 25) {
-          setPages((prev) => [
-            ...prev,
+          setPages((prev) => {
+            // Remove any existing page with the same pageNum
+            const filtered = prev.filter((p) => p.pageNum !== pageNum + 1)
+            return [
+              ...filtered,
               { pageNum: pageNum + 1, items: createSkeletonData() }
-          ])
+            ]
+          })
           await fetchData(pageNum + 1, filter, sorter)
         }
       },
@@ -378,7 +457,7 @@ const ObjectTable = forwardRef(
         key: 'icon',
         width: 45,
         fixed: 'left',
-        render: model.icon
+        render: () => React.createElement(model.icon)
       }
     ]
 
@@ -638,11 +717,9 @@ ObjectTable.displayName = 'ObjectTable'
 
 ObjectTable.propTypes = {
   type: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired,
   pageSize: PropTypes.number,
   scrollHeight: PropTypes.string,
   onDataChange: PropTypes.func,
-  authenticated: PropTypes.bool.isRequired,
   initialPage: PropTypes.number,
   cards: PropTypes.bool,
   cardRenderer: PropTypes.func,