modified the heaters to use the mobile view of the responsive table rahter than define their own list

src/pages/Heaters.tsx

@@ -3,6 +3,7 @@ import DeviceLinkDrawer from "common/DeviceLinkDrawer";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
 //import { getTableIcons } from "common/ResponsiveTable";
 import { useMobile } from "hooks";
+import { cloneDeep } from "lodash";
 //import MaterialTable from "material-table";
 import { Device } from "models";
 import { ObjectHeater } from "models/ObjectHeater";
@@ -109,17 +110,19 @@ export default function Heaters() {
         setPage={(page)=>{setTablePage(page)}}
         handleRowsPerPageChange={handleChange}
         onRowClick={goToHeater}
-      />
+        loadMore={()=>{
-    )
+          let current = cloneDeep(heaters)
-  };
+          objectHeaterAPI
-
+          .listObjectHeatersPageData(pageSize, current.length, undefined, undefined, searchText, as)
-  const mobileList = () => {
+          .then(resp => {
+            setHeaters(heaters.concat(resp.data.heaterData));
+          });
+        }}
+        renderMobile={(row)=>{
           return (
-      <List>
-        {heaters.map(h => (
             <ObjectHeaterCard
-            key={h.heater?.key}
+            key={row.heater?.key}
-            heaterData={h}
+            heaterData={row}
             linkDevice={(heater, linkedDevices) => {
               setHeaterToLink(heater);
               setOpenLinkDrawer(true);
@@ -131,9 +134,10 @@ export default function Heaters() {
               setDevices(d);
             }}
           />
-        ))}
+          )
-      </List>
+        }}
-    );
+      />
+    )
   };
 
   return (
@@ -180,7 +184,7 @@ export default function Heaters() {
         }}
         pulse={heaters.length < 1}
       />
-      {isMobile ? mobileList() : desktopTable()}
+      {desktopTable()}
     </PageContainer>
   );
 }