Fixed Tenzir force start from frontend

frontend/src/views/Workflows2.jsx

@@ -716,6 +716,8 @@ const Workflows2 = (props) => {
     const [videoViewOpen, setVideoViewOpen] = React.useState(false)
     const [gettingStartedItems, setGettingStartedItems] = React.useState([])
     const [selectedWorkflowIndexes, setSelectedWorkflowIndexes] = React.useState([])
+    const [page, setPage] = React.useState(0);
+    const [pageSize, setPageSize] = React.useState(100);
     const [highlightIds, setHighlightIds] = React.useState([])
 
     const [apps, setApps] = React.useState([]);
@@ -751,15 +753,6 @@ const Workflows2 = (props) => {
         navigate(`${location.pathname}?${queryParams.toString()}`);
     };
 
-    useEffect(() => {
-        if (currTab === 2) {
-            setIsLoadingPublicWorkflow(true);
-            // Simulate loading time for the Algolia search results
-            setTimeout(() => {
-                setIsLoadingPublicWorkflow(false);
-            }, 2500);
-        }
-    }, [currTab])
 
 
 
@@ -1322,6 +1315,8 @@ const Workflows2 = (props) => {
                 if (responseJson !== undefined && responseJson !== null) {
 					if (responseJson.success === false) {
 					} else if (responseJson.length === 0) {
+                        // When there are no workflows, we can set the loading to false
+                        setIsLoadingWorkflow(false)
 						if (currTab !== 2) {
 							toast("No workflows found. Showing workflow discovery")
 							setCurrTab(2)
@@ -2483,6 +2478,7 @@ const Workflows2 = (props) => {
             }
         }
 
+
         return (
             <div style={{ width: "100%", minWidth: 320, position: "relative", border: highlightIds.includes(data.id) ? "2px solid #f85a3e" : isDistributed || hasSuborgs ? "2px solid #40E0D0" : "inherit", borderRadius: theme.palette?.borderRadius, backgroundColor: "#212121", fontFamily: theme?.typography?.fontFamily }}>
                 <Paper square style={paperAppStyle}>
@@ -2537,7 +2533,7 @@ const Workflows2 = (props) => {
                                         maxWidth: 310,
                                         padding: "12px 0",
                                     }}>
-                                        {(data?.image !== undefined || data?.image_url !== undefined) ? (
+                                        {(data?.image !== undefined || (data?.image_url !== undefined && data?.image_url.length > 0)) ? (
                                             <div style={{
                                                 marginBottom: 15,
                                                 borderRadius: theme.palette?.borderRadius,
@@ -3371,7 +3367,15 @@ const Workflows2 = (props) => {
                     className={classes.datagrid}
                     rows={rows}
                     columns={columns}
-                    pageSize={100}
+                    page={page}
+                    onPageChange={(newPage) => {
+                        setPage(newPage)
+                    }}
+                    pageSize={pageSize}
+                    onPageSizeChange={(newPageSize) => {
+                        setPageSize(newPageSize);
+                    }}
+                    rowsPerPageOptions={[25, 50, 100, 150]}
                     checkboxSelection
                     autoHeight
                     density="standard"
@@ -3962,7 +3966,7 @@ const Workflows2 = (props) => {
             setIsLoadingWorkflow(false);
 
         }
-    }, [currTab, workflows, userdata, filteredWorkflows])
+    }, [currTab, workflows, userdata, filteredWorkflows, filters])