Homepage loading slowly - too many events

[daisycrego]

Now that there are >1000 events, the render of the EventsTable is getting slow.

Solutions

• Only send a subset of the events data to the view. Use a paginated query on the API side to get more events from the backend, rather than having all the events loaded.
• Look at how the events table is implemented, maybe we can pass a subset of the events down to the events table and this will limit the rendering...

[daisycrego]

The issue is possibly the call to stableSort on all ~1100 rows:

<TableBody>
  {stableSort(rows, getComparator(order, orderBy))
    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
    .map((row, index) => {
      const labelId = `enhanced-table-checkbox-${index}`;

      return (
        <TableRow hover tabIndex={-1} key={row._id}>
          <TableCell
            component="th"
            id={labelId}
            scope="row"
            align={"default"}
            padding={"left"}
          >
            {row.property ? row.property.street : ""}
          </TableCell>
          <TableCell align={"default"} padding={"left"}>
            {`${new Date(row.created).toDateString()} ${new Date(
              row.created
            ).toLocaleTimeString()}`}
          </TableCell>
          <TableCell align={"default"} padding={"left"}>
            {row.source}
          </TableCell>
          <TableCell align={"default"} padding={"left"}>
            {data(row)}
          </TableCell>
          <TableCell align={"default"} padding={"left"}>
            <Link to={"/event/" + row._id} key={row._id}>
              <IconButton>
                <ArrowForward />
              </IconButton>
            </Link>
          </TableCell>
        </TableRow>
      );
    })}
  {emptyRows > 0 && (
    <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
      <TableCell colSpan={6} />
    </TableRow>
  )}
</TableBody>

[daisycrego]

SOLUTION

• Before, we were performing the stableSort and the slice within the TableBody as inline JSX. Now, I define a new variable, activeRows, to determine which rows to display, outside of the return statement:

  
  const activeRows = stableSort(rows, getComparator(order, orderBy)).slice(
  page * rowsPerPage,
  page * rowsPerPage + rowsPerPage
  );

{ activeRows.map((row, index) => { ...

[daisycrego]

Not 100% on this, but it seems that defining activeRows in the component body instead of as embedded javascript is allowing us to spend time fetching the activeRows before the user ever sees the page. I think that in the previous implementation, the sorting functions are effectively initiated when the component renders, rather than before.