From 03f7c764f56788ee2d55e87dd536cd93000cfefa Mon Sep 17 00:00:00 2001
From: Brandon Tabaska <brandon.tabaska@mass.gov>
Date: Fri, 23 Aug 2024 10:24:48 -0400
Subject: [PATCH] [Issue #2041] Remove inline styling from pagination wrapper
 component (navapbc/simpler-grants-gov#173)

Fixes #2041

> Removed inline styling on component

> Ended up having to create a custom loading style for pagination due to
no support from USWDS on this. Honestly though IDK why we don't just
hide pagination during loading...

> Screenshots, GIF demos, code examples or output to help show the
changes working as expected.
![2024-08-08 13 59
02](https://github.com/user-attachments/assets/04994a3f-a48e-4511-839d-aa686a7f1414)
---
 frontend/src/components/search/SearchPagination.tsx |  7 +------
 frontend/src/styles/_loading.scss                   | 10 ++++++++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/search/SearchPagination.tsx b/frontend/src/components/search/SearchPagination.tsx
index a23a30ea1..b69971863 100644
--- a/frontend/src/components/search/SearchPagination.tsx
+++ b/frontend/src/components/search/SearchPagination.tsx
@@ -41,12 +41,7 @@ export default function SearchPagination({
   };
 
   return (
-    <div
-      style={{
-        pointerEvents: loading ? "none" : "fill",
-        opacity: loading ? 0.5 : 1,
-      }}
-    >
+    <div className={`grants-pagination ${loading ? "disabled" : ""}`}>
       <Pagination
         pathname="/search"
         totalPages={pages}
diff --git a/frontend/src/styles/_loading.scss b/frontend/src/styles/_loading.scss
index b706ec049..9e5d4ddb6 100644
--- a/frontend/src/styles/_loading.scss
+++ b/frontend/src/styles/_loading.scss
@@ -49,3 +49,13 @@ $spinner-size: units(4);
     transform: rotate(360deg);
   }
 }
+
+.grants-pagination.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  & > *,
+  & * {
+    user-select: none;
+    pointer-events: none;
+  }
+}