Merge pull request #24 from danskernesdigitalebibliotek/DDFBRA-163-fi…

…x-next-build-issues

Build issue fixes

app/layout.tsx

@@ -5,7 +5,6 @@ import Footer from "@/components/global/footer/Footer"
 import GridHelper from "@/components/global/gridHelper/GridHelper"
 import Header from "@/components/global/header/Header"
 import Theme from "@/components/global/theme/Theme"
-import { getEnvironment } from "@/lib/helpers/helper.env"
 import ReactQueryProvider from "@/lib/providers/ReactQueryProvider"
 import "@/styles/globals.css"
 

app/search/page.tsx

@@ -1,4 +1,5 @@
-import { dehydrate, HydrationBoundary } from "@tanstack/react-query"
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
+import { Suspense } from "react"
 
 import SearchPageLayout from "@/components/pages/searchPageLayout/SearchPageLayout"
 import getQueryClient from "@/lib/getQueryClient"
@@ -12,7 +13,9 @@ const Page = async ({ searchParams: { q } }: { searchParams: { q: string } }) =>
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <SearchPageLayout searchQuery={q} />
+      <Suspense fallback={<p>Loading...</p>}>
+        <SearchPageLayout searchQuery={q} />
+      </Suspense>
     </HydrationBoundary>
   )
 }

components/global/header/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Suspense } from "react"
 
 import { Button } from "@/components/shared/button/Button"
 import DarkModeToggle from "@/components/shared/darkModeToggle/DarkModeToggle"
@@ -30,7 +30,9 @@ function Header() {
       <div className="h-navigation-search-height">
         <div className="content-container">
           <div className="flex h-full w-full items-center">
-            <SearchInput placeholder="Søg" />
+            <Suspense fallback={<p>Loading...</p>}>
+              <SearchInput placeholder="Søg" />
+            </Suspense>
           </div>
         </div>
       </div>

components/pages/searchPageLayout/SearchPageLayout.tsx

@@ -118,6 +118,8 @@ const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
     if (isInView) {
       handleLoadMore()
     }
+    // We choose to ignore the eslint warning below
+    // because we do not want to add the handleMore callback which changes on every render.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isInView])
 
@@ -139,7 +141,7 @@ const SearchPageLayout = ({ searchQuery }: { searchQuery?: string }) => {
       setFacetFilters(facetsForSearchRequest)
       setCurrentPage(0)
     }
-  }, [facetsForSearchRequest, facetFilters])
+  }, [facetFilters, facetsForSearchRequest])
 
   const facetData = dataFacets?.search?.facets
   const hitcount = data?.pages?.[0]?.search.hitcount ?? 0

components/shared/searchFilters/SearchFilterBar.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from "react"
+import React, { Suspense, useState } from "react"
 
 import { SearchFacetFragment } from "@/lib/graphql/generated/fbi/graphql"
 
@@ -21,13 +21,14 @@ const SearchFilterBar = ({ facets }: SearchFilterBarProps) => {
         {facets.map((facet, index) => {
           const isLast = index === facets.length - 1
           return (
-            <SearchFiltersColumn
-              facet={facet}
-              isLast={isLast}
-              key={facet.name}
-              isExpanded={isExpanded}
-              setIsExpanded={setIsExpanded}
-            />
+            <Suspense key={facet.name} fallback={<p>Loading...</p>}>
+              <SearchFiltersColumn
+                facet={facet}
+                isLast={isLast}
+                isExpanded={isExpanded}
+                setIsExpanded={setIsExpanded}
+              />
+            </Suspense>
           )
         })}
       </div>

components/shared/searchInput/SearchInput.tsx

@@ -24,6 +24,9 @@ const SearchInput = ({ className, placeholder }: SearchInputProps) => {
     return () => {
       window.removeEventListener("keydown", handleKeydown)
     }
+    // We choose to ignore the eslint warning below
+    // because we do not want to add the handleKeydown callback which changes on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {