I find this triple, JSX ternary a little confusing and personally think this is a good candidate for early return.

How would you do the early return? I'm not seeing a good way of doing it since the margins and page header need to be there in each case. I could put those in a const but at that point I'd rather put the content (error or data) in a const and still use the conditional so you can easily see what's definitely there vs what's conditional.

I might move the margins and page header into TemplatesPage.tsx - they seem like page scaffolding to me. Then, one could decompose the TemplatesPageView file:

export const TemplatesPageView = () => {
  if (props.getOrganizationsError) {
    return <ErrorSummary />
  }

  if (props.getTemplatesError) {
    return <ErrorSummary />
  }

  if (empty) {
    return (
      <TableContainer>
        <LoadingTableBody />
      </TableContainer>
    )
  }

  return (
    <TableContainer>
      <TemplateTableBody templates={templates} />
    </TableContainer>
  )
}

I think the benefit here is we are writing state in a declarative way - it is apparent at a glance what states the developer should be aware of. Let me know what you think!

Yeah, this looks nice and readable, but the scaffolding is in the view for storybook reasons. I'm open to a refactor but I think I'll leave it for future work so I can get the error handling in.

sounds good!

What do you think about making a parent table component that accepts a child table body component? That child component could be a loading component, or a data-filled component. I was wondering if breaking apart state into components here might make this a little easier to read and reason about.

Sounds like a good idea, can you make a ticket for it? We could apply it in multiple places.

I think we need to update the import of TemplatesPage in AppRouter.tsx and in TemplatesPage.test.tsx.

Gah, thanks!

I don't think we need a ternary here.