Use useLayoutEffect to set isLoaded state and add isDisabled state to…

… PopoverButton
pantheon-systems · Aug 21, 2024 · 71ee1c4 · 71ee1c4
1 parent f7c12c5
commit 71ee1c4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/releaseNotePopoverCategorySelector.js b/src/components/releaseNotePopoverCategorySelector.js
@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { activeReleaseNoteCategories } from "../data/releaseNoteCategories"
 import { Button, FlexContainer, Popover } from "@pantheon-systems/pds-toolkit-react"
 
-const ReleaseNotePopoverCategorySelector = ({filters, setFilters, setCurrentPage}) => {
+const ReleaseNotePopoverCategorySelector = ({filters, setFilters, setCurrentPage, isDisabled}) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
   // Get the active categories data.
@@ -103,6 +103,7 @@ const ReleaseNotePopoverCategorySelector = ({filters, setFilters, setCurrentPage
       iconName={popoverTriggerIcon}
       displayType='icon-end'
       onClick={() => setIsPopoverOpen(true)}
+      disabled={isDisabled}
     />
   )
 

diff --git a/src/components/releaseNotesPager.js b/src/components/releaseNotesPager.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Icon } from "@pantheon-systems/pds-toolkit-react"
 import { navigate } from 'gatsby'
 
-const ReleaseNotesPager = ({currentPage, setCurrentPage, totalPagesRef, queryStrings }) => {
+const ReleaseNotesPager = ({currentPage, setCurrentPage, totalPagesRef, queryStrings, setIsPageLoaded }) => {
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
@@ -11,6 +11,7 @@ const ReleaseNotesPager = ({currentPage, setCurrentPage, totalPagesRef, queryStr
   }
 
   const handlePageChange = (newPage) => {
+    setIsPageLoaded(false)
     setCurrentPage(newPage)
     navigate(`/release-notes/${newPage}/?${queryStrings}`)
     scrollToTop()

diff --git a/src/templates/releaseNotesListing/index.js b/src/templates/releaseNotesListing/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react"
+import React, { useEffect, useState, useRef, useLayoutEffect } from "react"
 import { graphql, navigate } from "gatsby"
 import debounce from "lodash.debounce"
 import Mark from "mark.js"
@@ -37,6 +37,7 @@ const ReleaseNotesListingTemplate = ({ data }) => {
   })
   const [currentPage, setCurrentPage] = useState(1)
   const [queryStrings, setQueryStrings] = useState('')
+  const [isLoaded, setIsLoaded] = useState(false);
 
   const notesPerPage = 8
   let totalPagesRef = useRef(0)
@@ -241,6 +242,10 @@ const ReleaseNotesListingTemplate = ({ data }) => {
   // Preprocess intro text.
   const introText = data.releasenotesYaml.introText
 
+  useLayoutEffect(() => {
+    setIsLoaded(true);
+  }, []);
+
   return (
     <Layout containerWidth={containerWidth} excludeSearch footerBorder>
       <SEO
@@ -286,7 +291,7 @@ const ReleaseNotesListingTemplate = ({ data }) => {
               />
             </div>
             <FlexContainer flexWrap='wrap' className='rn-popover-trigger-and-tags' >
-              <ReleaseNotePopoverCategorySelector filters={filters} setFilters={setFilters} setCurrentPage={setCurrentPage} />
+              <ReleaseNotePopoverCategorySelector filters={filters} setFilters={setFilters} setCurrentPage={setCurrentPage} isDisabled={!isLoaded} />
               <FlexContainer mobileFlex='same' spacing='narrow' flexWrap='wrap' >
                 {
                   filters && filters.categories.map(item => {
@@ -315,7 +320,7 @@ const ReleaseNotesListingTemplate = ({ data }) => {
             setCurrentPage={setCurrentPage}
             totalPagesRef={totalPagesRef}
             queryStrings={queryStrings}
-            updateQueryStrings={updateQueryStrings}
+            setIsPageLoaded={setIsLoaded}
           />
         </Container>
       </main>