From cf0903ea70520d8515030d1c5b68ddb38b99f45a Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 1 Jun 2023 15:00:58 +0000
Subject: [PATCH] Show pagination status

---
 .../WorkspacesPage/WorkspacesPageView.tsx     | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index bdb97241e3383..d3a92c44e5769 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -21,6 +21,8 @@ import { Filter } from "./filter/filter"
 import { hasError, isApiValidationError } from "api/errors"
 import { workspaceFilterQuery } from "utils/filters"
 import { SearchBarWithFilter } from "components/SearchBarWithFilter/SearchBarWithFilter"
+import Box from "@mui/material/Box"
+import Skeleton from "@mui/material/Skeleton"
 
 export const Language = {
   pageTitle: "Workspaces",
@@ -143,6 +145,28 @@ export const WorkspacesPageView: FC<
           />
         )}
       </Stack>
+
+      <Box
+        sx={{
+          fontSize: 13,
+          mb: 2,
+          mt: 1,
+          color: (theme) => theme.palette.text.secondary,
+          "& strong": { color: (theme) => theme.palette.text.primary },
+        }}
+      >
+        {workspaces ? (
+          <>
+            Showing <strong>{workspaces?.length}</strong> of{" "}
+            <strong>{count}</strong> workspaces
+          </>
+        ) : (
+          <Box sx={{ height: 24, display: "flex", alignItems: "center" }}>
+            <Skeleton variant="text" width={160} height={16} />
+          </Box>
+        )}
+      </Box>
+
       <WorkspacesTable
         workspaces={workspaces}
         isUsingFilter={filterProps.filter.query !== ""}