fix: Don't show pagination during workspaces load (#4743)

site/src/components/PaginationWidget/PaginationWidget.test.tsx

@@ -3,29 +3,28 @@ import { render } from "../../testHelpers/renderHelpers"
 import { PaginationWidget } from "./PaginationWidget"
 
 describe("PaginatedList", () => {
-  it("displays an accessible previous and next button regardless of the number of pages", async () => {
-    const { container } = render(
+  it("displays an accessible previous and next button", () => {
+    render(
       <PaginationWidget
         prevLabel="Previous"
         nextLabel="Next"
+        numRecords={200}
+        numRecordsPerPage={12}
+        activePage={1}
         onPrevClick={() => jest.fn()}
         onNextClick={() => jest.fn()}
       />,
     )
 
     expect(
-      await screen.findByRole("button", { name: "Previous page" }),
-    ).toBeTruthy()
+      screen.getByRole("button", { name: "Previous page" }),
+    ).toBeInTheDocument()
     expect(
-      await screen.findByRole("button", { name: "Next page" }),
-    ).toBeTruthy()
-    // Shouldn't render any pages if no records are passed in
-    expect(
-      await container.querySelectorAll(`button[name="Page button"]`),
-    ).toHaveLength(0)
+      screen.getByRole("button", { name: "Next page" }),
+    ).toBeInTheDocument()
   })
 
-  it("displays the expected number of pages with one ellipsis tile", async () => {
+  it("displays the expected number of pages with one ellipsis tile", () => {
     const { container } = render(
       <PaginationWidget
         prevLabel="Previous"
@@ -41,11 +40,11 @@ describe("PaginatedList", () => {
 
     // 7 total spaces. 6 are page numbers, one is ellipsis
     expect(
-      await container.querySelectorAll(`button[name="Page button"]`),
+      container.querySelectorAll(`button[name="Page button"]`),
     ).toHaveLength(6)
   })
 
-  it("displays the expected number of pages with two ellipsis tiles", async () => {
+  it("displays the expected number of pages with two ellipsis tiles", () => {
     const { container } = render(
       <PaginationWidget
         prevLabel="Previous"
@@ -61,7 +60,7 @@ describe("PaginatedList", () => {
 
     // 7 total spaces. 2 sets of ellipsis on either side of the active page
     expect(
-      await container.querySelectorAll(`button[name="Page button"]`),
+      container.querySelectorAll(`button[name="Page button"]`),
     ).toHaveLength(5)
   })
 })

site/src/components/PaginationWidget/PaginationWidget.tsx

@@ -127,8 +127,8 @@ export const PaginationWidget = ({
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
   const styles = useStyles()
 
-  // No need to display any pagination if we know the number of pages is 1
-  if (numPages === 1 || numRecords === 0) {
+  // No need to display any pagination if we know the number of pages is 1 or 0
+  if (numPages <= 1 || numRecords === 0) {
     return null
   }