From 3a02c3910903e5d6f06c9fe097c3d08b5f083d70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20=C5=A0korpil?= <stepan@skorpil.cz>
Date: Fri, 6 Jan 2023 23:06:03 +0100
Subject: [PATCH] Finished nextjs appdir adaptations

---
 Dockerfile                                    | 13 +++----
 application/src/app/feeds/head.tsx            |  8 ++++
 application/src/app/feeds/page.tsx            |  2 +-
 application/src/app/head.tsx                  | 11 ++----
 application/src/app/layout.tsx                | 18 +++++++--
 application/src/app/loading.tsx               |  8 ++++
 application/src/app/nodes/head.tsx            |  8 ++++
 application/src/app/nodes/page.tsx            |  2 +-
 application/src/app/optout/head.tsx           |  8 ++++
 application/src/app/optout/page.tsx           |  3 +-
 application/src/app/stats/head.tsx            |  8 ++++
 application/src/app/stats/page.tsx            |  5 +--
 application/src/components/Spinner.tsx        |  6 +--
 application/src/components/feed/FeedForm.tsx  |  4 +-
 .../src/components/feed/FeedPlaceholder.tsx   |  2 +-
 .../src/components/feed/FeedResults.tsx       |  1 -
 .../src/components/feed/FeedSearch.tsx        |  7 ++--
 .../src/components/form/SubmitButton.tsx      | 18 +++++++--
 .../src/components/layout/ClientLayout.tsx    | 27 ++-----------
 application/src/components/layout/Footer.tsx  |  3 +-
 .../src/components/layout/HtmlHead.tsx        | 20 ++++++++++
 application/src/components/node/NodeForm.tsx  |  4 +-
 .../src/components/node/NodePlaceholder.tsx   | 39 +++++++++++--------
 .../src/components/node/NodeSearch.tsx        | 35 +++++++++++------
 application/src/components/server/Layout.tsx  |  8 +---
 application/src/components/stats/Stats.tsx    |  6 +--
 .../src/components/stats/StatsPlaceholder.tsx |  7 +++-
 application/src/styles/global.scss            |  4 +-
 28 files changed, 177 insertions(+), 108 deletions(-)
 create mode 100644 application/src/app/feeds/head.tsx
 create mode 100644 application/src/app/loading.tsx
 create mode 100644 application/src/app/nodes/head.tsx
 create mode 100644 application/src/app/optout/head.tsx
 create mode 100644 application/src/app/stats/head.tsx
 create mode 100644 application/src/components/layout/HtmlHead.tsx

diff --git a/Dockerfile b/Dockerfile
index 7d07ff4..e0d98a5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,10 +1,11 @@
 FROM node:18-bullseye AS prebuild
+
 FROM prebuild AS build
 WORKDIR /srv
 COPY application/package*.json ./
+COPY application/yarn.lock ./
 RUN yarn install
 COPY application/. .
-RUN chmod -R uog+r .
 RUN yarn build
 
 FROM build as dev
@@ -12,13 +13,9 @@ CMD yarn dev
 
 FROM prebuild AS prod
 RUN groupadd -g 1001 nodejs
-RUN useradd -u 1001 -g 1001 nextjs
+RUN useradd -m -u 1001 -g 1001 nextjs
 USER nextjs
 EXPOSE 3000
 WORKDIR /srv
-COPY --from=build /srv/node_modules ./node_modules
-COPY --from=build /srv/package*.json ./
-COPY --from=build /srv/next.config.js ./
-COPY --from=build --chown=nextjs:nodejs /srv/src/.next ./src/.next
-COPY --from=build /srv/src/public ./src/public
-CMD yarn start
+COPY --from=build --chown=nextjs:nodejs /srv/. ./
+CMD yarn build && yarn start
diff --git a/application/src/app/feeds/head.tsx b/application/src/app/feeds/head.tsx
new file mode 100644
index 0000000..1884fe4
--- /dev/null
+++ b/application/src/app/feeds/head.tsx
@@ -0,0 +1,8 @@
+import React, { ReactElement } from 'react'
+import HtmlHead from '../../components/layout/HtmlHead'
+
+export default function Head (): ReactElement {
+  return <>
+    <HtmlHead title={'People'} description={'Search people on Fediverse'}/>
+    </>
+}
diff --git a/application/src/app/feeds/page.tsx b/application/src/app/feeds/page.tsx
index b0c12bc..cc2d82a 100644
--- a/application/src/app/feeds/page.tsx
+++ b/application/src/app/feeds/page.tsx
@@ -6,7 +6,7 @@ import createConfig from '../../config/createConfig'
 export default async function Page (): Promise<ReactElement> {
   const clientConfig = createConfig().get('client')
   return (
-      <Layout title={'People'} description={'Search people on Fediverse'} config={clientConfig}>
+      <Layout title={'People'} config={clientConfig}>
         <FeedSearch />
       </Layout>
   )
diff --git a/application/src/app/head.tsx b/application/src/app/head.tsx
index db9659e..dcda320 100644
--- a/application/src/app/head.tsx
+++ b/application/src/app/head.tsx
@@ -1,11 +1,6 @@
-import { ReactElement } from 'react'
+import React, { ReactElement } from 'react'
+import HtmlHead from '../components/layout/HtmlHead'
 
 export default function Head (): ReactElement {
-  return (
-    <>
-      <title></title>
-      <meta content="width=device-width, initial-scale=1" name="viewport" />
-      <link rel="icon" href="/favicon.ico" />
-    </>
-  )
+  return <HtmlHead />
 }
diff --git a/application/src/app/layout.tsx b/application/src/app/layout.tsx
index e33333e..a8ff970 100644
--- a/application/src/app/layout.tsx
+++ b/application/src/app/layout.tsx
@@ -1,4 +1,7 @@
 import React, { ReactElement } from 'react'
+import Footer from '../components/layout/Footer'
+import NavBar from '../components/layout/NavBar'
+import '../styles/global.scss'
 
 export default function RootLayout ({
   children
@@ -6,9 +9,16 @@ export default function RootLayout ({
   children: React.ReactNode
 }): ReactElement {
   return (
-    <html>
-      <head />
-      <body>{children}</body>
-    </html>
+        <html>
+        <body>
+            <div className="container">
+                <NavBar/>
+                <main>
+                    {children}
+                </main>
+                <Footer/>
+            </div>
+        </body>
+        </html>
   )
 }
diff --git a/application/src/app/loading.tsx b/application/src/app/loading.tsx
new file mode 100644
index 0000000..42602cd
--- /dev/null
+++ b/application/src/app/loading.tsx
@@ -0,0 +1,8 @@
+import React, { ReactElement } from 'react'
+
+export default function Loading (): ReactElement {
+  console.log('Loading')
+  return <div className={'container'}>
+    <h1 className={'placeholder-glow'} aria-hidden={true}><span className={'placeholder col-4'}/></h1>
+  </div>
+}
diff --git a/application/src/app/nodes/head.tsx b/application/src/app/nodes/head.tsx
new file mode 100644
index 0000000..65050c0
--- /dev/null
+++ b/application/src/app/nodes/head.tsx
@@ -0,0 +1,8 @@
+import React, { ReactElement } from 'react'
+import HtmlHead from '../../components/layout/HtmlHead'
+
+export default function Head (): ReactElement {
+  return <>
+    <HtmlHead title={'Servers'} description={'Search Fediverse servers'}/>
+    </>
+}
diff --git a/application/src/app/nodes/page.tsx b/application/src/app/nodes/page.tsx
index 6d3002d..7b84166 100644
--- a/application/src/app/nodes/page.tsx
+++ b/application/src/app/nodes/page.tsx
@@ -6,7 +6,7 @@ import createConfig from '../../config/createConfig'
 export default async function Page (): Promise<ReactElement> {
   const clientConfig = createConfig().get('client')
   return (
-        <Layout title={'Servers'} description={'Search Fediverse servers'} config={clientConfig}>
+        <Layout title={'Servers'} config={clientConfig}>
             <NodeSearch />
         </Layout>
   )
diff --git a/application/src/app/optout/head.tsx b/application/src/app/optout/head.tsx
new file mode 100644
index 0000000..a806a59
--- /dev/null
+++ b/application/src/app/optout/head.tsx
@@ -0,0 +1,8 @@
+import React, { ReactElement } from 'react'
+import HtmlHead from '../../components/layout/HtmlHead'
+
+export default function Head (): ReactElement {
+  return <>
+    <HtmlHead title={'Opt out'} description={'How to opt out from our index'}/>
+    </>
+}
diff --git a/application/src/app/optout/page.tsx b/application/src/app/optout/page.tsx
index 39fa63a..c2d4565 100644
--- a/application/src/app/optout/page.tsx
+++ b/application/src/app/optout/page.tsx
@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react'
 import Accordion from '../../components/accordion/Accordion'
-import AccordionItem from '../../components/accordion/AccordionItem'
 import MastodonNoindexOptout from '../../components/optout/MastodonNoindexOptout'
 import MastodonSuggestingOptout from '../../components/optout/MastodonSuggestingOptout'
 import RobotsTxtOptout from '../../components/optout/RobotsTxtOptout'
@@ -11,7 +10,7 @@ import createConfig from '../../config/createConfig'
 export default async function Page (): Promise<ReactElement> {
   const clientConfig = createConfig().get('client')
   return (
-        <Layout title={'Opt out'} description={'What to do to opt out from the index'} config={clientConfig}>
+        <Layout title={'Opt out'} config={clientConfig}>
             <p>You don&apos;t want to be listed here? There are several ways to opt-out from our index:</p>
             <Accordion>
                 <MastodonNoindexOptout/>
diff --git a/application/src/app/stats/head.tsx b/application/src/app/stats/head.tsx
new file mode 100644
index 0000000..7a48a5d
--- /dev/null
+++ b/application/src/app/stats/head.tsx
@@ -0,0 +1,8 @@
+import React, { ReactElement } from 'react'
+import HtmlHead from '../../components/layout/HtmlHead'
+
+export default function Head (): ReactElement {
+  return <>
+    <HtmlHead title={'Stats'} description={'Index statistics'}/>
+    </>
+}
diff --git a/application/src/app/stats/page.tsx b/application/src/app/stats/page.tsx
index 11de63d..544683f 100644
--- a/application/src/app/stats/page.tsx
+++ b/application/src/app/stats/page.tsx
@@ -1,13 +1,12 @@
 import React, { ReactElement } from 'react'
-import NodeSearch from '../../components/node/NodeSearch'
 import Layout from '../../components/server/Layout'
-import Stats from "../../components/stats/Stats";
+import Stats from '../../components/stats/Stats'
 import createConfig from '../../config/createConfig'
 
 export default async function Page (): Promise<ReactElement> {
   const clientConfig = createConfig().get('client')
   return (
-        <Layout title={'Stats'} description={'Fediverse stats'} config={clientConfig}>
+        <Layout title={'Stats'} config={clientConfig}>
             <Stats />
         </Layout>
   )
diff --git a/application/src/components/Spinner.tsx b/application/src/components/Spinner.tsx
index 44a295f..2e34d69 100644
--- a/application/src/components/Spinner.tsx
+++ b/application/src/components/Spinner.tsx
@@ -1,11 +1,9 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
-const Spinner: React.FC = () => {
+export default function Spinner (): ReactElement {
   return (
         <div className="spinner-border" role="status">
             <span className="visually-hidden">Loading...</span>
         </div>
   )
 }
-
-export default Spinner
diff --git a/application/src/components/feed/FeedForm.tsx b/application/src/components/feed/FeedForm.tsx
index 064ddea..ca9439c 100644
--- a/application/src/components/feed/FeedForm.tsx
+++ b/application/src/components/feed/FeedForm.tsx
@@ -6,10 +6,11 @@ import SearchInput from '../form/SearchInput'
 import SubmitButton from '../form/SubmitButton'
 
 export default function FeedForm (
-  { onSubmit, onQueryChange, query }: {
+  { onSubmit, onQueryChange, query, loading }: {
     onSubmit: () => void
     onQueryChange: (query: FeedQueryInput) => void
     query: FeedQueryInput
+    loading?: boolean
   }
 ): ReactElement {
   const handleQueryChange = (event): void => {
@@ -41,6 +42,7 @@ export default function FeedForm (
                <SubmitButton
                    faIcon={faSearch}
                    label={'Search'}
+                   loading={loading}
                    id={'search-feeds-button'}
                />
            </div>
diff --git a/application/src/components/feed/FeedPlaceholder.tsx b/application/src/components/feed/FeedPlaceholder.tsx
index 629e80c..f38b777 100644
--- a/application/src/components/feed/FeedPlaceholder.tsx
+++ b/application/src/components/feed/FeedPlaceholder.tsx
@@ -7,7 +7,7 @@ import Badge from './badges/Badge'
 export default function FeedPlaceholder (): ReactElement {
   const greyDotBlob = 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='
   return (
-      <section className="card feed g-col-12 mb-3" aria-hidden="true">
+      <section className="card feed g-col-12 mb-3 placeholder-wrapper" aria-hidden="true">
           <div className="card-body">
               <h3 className={'card-title with-emoji display-name placeholder-glow'}>
                   <a><span className="placeholder col-4"></span></a>
diff --git a/application/src/components/feed/FeedResults.tsx b/application/src/components/feed/FeedResults.tsx
index 4f1b3e9..cc4f2a4 100644
--- a/application/src/components/feed/FeedResults.tsx
+++ b/application/src/components/feed/FeedResults.tsx
@@ -16,7 +16,6 @@ export default function FeedResults ({ feeds }: { feeds: ListFeedsItemFragment[]
   return (<div className={'grid'}>
         {
             feeds.map((feed, index) => {
-              console.info('feed', feed)
               return (<FeedResult key={index} feed={feed} />)
             })
         }
diff --git a/application/src/components/feed/FeedSearch.tsx b/application/src/components/feed/FeedSearch.tsx
index 97ab458..d6eda80 100644
--- a/application/src/components/feed/FeedSearch.tsx
+++ b/application/src/components/feed/FeedSearch.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useQuery } from '@apollo/client'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { z } from 'zod'
 import { FeedQueryInput, ListFeedsDocument } from '../../graphql/generated/types'
@@ -27,7 +27,6 @@ export default function FeedSearch (): ReactElement {
   const matomo = useMatomo()
   const searchParams = useSearchParams()
   const pathname = usePathname()
-  const router = useRouter()
   const routerQuery = feedQueryInputSchema.parse(Object.fromEntries(searchParams))
   const [page, setPage] = useState<number>(0)
   const [query, setQuery] = useState<FeedQueryInput>(routerQuery)
@@ -39,7 +38,7 @@ export default function FeedSearch (): ReactElement {
     }
   })
   useEffect((): void => {
-    router.push(`${pathname ?? ''}?${createUrlSearchParams(query).toString()}`)
+    window.history.replaceState({}, '', `${pathname ?? ''}?${createUrlSearchParams(query).toString()}`)
     matomo.trackEvent({
       category: 'feeds',
       action: 'new-search'
@@ -95,7 +94,7 @@ export default function FeedSearch (): ReactElement {
   }
 
   return <>
-        <FeedForm query={query} onQueryChange={handleQueryChange} onSubmit={handleSearchSubmit}/>
+        <FeedForm query={query} onQueryChange={handleQueryChange} onSubmit={handleSearchSubmit} loading={loading || pageLoading}/>
         <FeedInfo show={query.search === ''}>
             <Loader loading={loading || pageLoading} showBottom={true} placeholder={(<FeedPlaceholder/>)}>
                 <FeedResults feeds={data?.listFeeds?.items}/>
diff --git a/application/src/components/form/SubmitButton.tsx b/application/src/components/form/SubmitButton.tsx
index c223247..e6039ec 100644
--- a/application/src/components/form/SubmitButton.tsx
+++ b/application/src/components/form/SubmitButton.tsx
@@ -2,13 +2,25 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { ReactElement } from 'react'
 
-export default function SubmitButton ({ faIcon, label, id }: {
+export default function SubmitButton ({ faIcon, label, id, loading, loadingLabel }: {
   faIcon: IconProp
   label: string
+  loadingLabel?: string
+  loading?: boolean
   id?: string
 }): ReactElement {
+  loadingLabel = loadingLabel ?? label
   return <button type={'submit'} className={'btn btn-primary'} id={id}>
-        <FontAwesomeIcon icon={faIcon}/>
-        <span>{label}</span>
+        {
+            loading === true
+              ? <>
+                    <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                    <span>{loadingLabel}</span>
+                </>
+              : <>
+                    <FontAwesomeIcon icon={faIcon}/>
+                    <span>{label}</span>
+                </>
+        }
     </button>
 }
diff --git a/application/src/components/layout/ClientLayout.tsx b/application/src/components/layout/ClientLayout.tsx
index 89f7016..9838ae2 100644
--- a/application/src/components/layout/ClientLayout.tsx
+++ b/application/src/components/layout/ClientLayout.tsx
@@ -1,18 +1,13 @@
 'use client'
 import React, { ReactElement, ReactNode, useEffect } from 'react'
-import Head from 'next/head'
 import { useMatomo } from '../../hooks/MatomoHook'
-import Footer from './Footer'
-import NavBar from './NavBar'
 
 export default function ClientLayout ({
   children,
-  title,
-  description
+  title
 }: {
   children?: ReactNode
   title: string
-  description: string
 }): ReactElement {
   const matomo = useMatomo()
   useEffect(() => {
@@ -20,24 +15,8 @@ export default function ClientLayout ({
   }, [])
   return (
       <div className={'container'}>
-          <Head>
-              <title>{title}</title>
-              <link rel="icon" href="/fedisearch.png"/>
-              <meta name="description" content={description}/>
-              <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-              <meta property="og:title" content={title}/>
-              <meta property="og:description" content={description}/>
-              <meta property="og:image" content="/fedisearch.png"/>
-              <meta property="og:type" content="website"/>
-          </Head>
-          <div className="container">
-              <NavBar />
-              <main>
-                  <h1>{title}</h1>
-                  {children}
-              </main>
-              <Footer/>
-          </div>
+          <h1>{title}</h1>
+          {children}
       </div>
   )
 }
diff --git a/application/src/components/layout/Footer.tsx b/application/src/components/layout/Footer.tsx
index b294b7e..57d48e9 100644
--- a/application/src/components/layout/Footer.tsx
+++ b/application/src/components/layout/Footer.tsx
@@ -1,9 +1,10 @@
+import Link from 'next/link'
 import React, { ReactElement } from 'react'
 
 export default function Footer (): ReactElement {
   return (
     <footer className={'text-center mt-5'}>
-        <p><a href={'/optout'}>How to opt-out</a></p>
+        <p><Link href={'/optout'}>How to opt-out</Link></p>
       <p>©{(new Date()).getFullYear()} <a href={'https://skorpil.cz'}>Štěpán Škorpil</a></p>
     </footer>
   )
diff --git a/application/src/components/layout/HtmlHead.tsx b/application/src/components/layout/HtmlHead.tsx
new file mode 100644
index 0000000..5d85534
--- /dev/null
+++ b/application/src/components/layout/HtmlHead.tsx
@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react'
+
+export default function ({ title, description }: {
+  title?: string
+  description?: string
+}): ReactElement {
+  const pageName = 'FediSearch'
+  const htmlTitle = (title !== undefined ? `${title} | ` : '') + pageName
+  description = description ?? 'Search on Fediverse'
+  return <>
+        <title>{htmlTitle}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <meta name="description" content={description}/>
+        <meta property="og:image" content="/fedisearch.png"/>
+        <meta property="og:type" content="website"/>
+        <meta property="og:title" content={title ?? pageName}/>
+        <meta property="og:description" content={description}/>
+        <link rel="icon" href="/fedisearch.png"/>
+    </>
+}
diff --git a/application/src/components/node/NodeForm.tsx b/application/src/components/node/NodeForm.tsx
index 64df506..52f8ddf 100644
--- a/application/src/components/node/NodeForm.tsx
+++ b/application/src/components/node/NodeForm.tsx
@@ -6,10 +6,11 @@ import SearchInput from '../form/SearchInput'
 import SubmitButton from '../form/SubmitButton'
 
 export default function NodeForm (
-  { onSubmit, onQueryChange, query }: {
+  { onSubmit, onQueryChange, query, loading }: {
     onSubmit: () => void
     onQueryChange: (query: NodeQueryInput) => void
     query: NodeQueryInput
+    loading?: boolean
   }
 ): ReactElement {
   const handleQueryChange = (event): void => {
@@ -42,6 +43,7 @@ export default function NodeForm (
                     label={'Search'}
                     faIcon={faSearch}
                     id={'search-nodes-button'}
+                    loading={loading}
                 />
             </div>
         </form>
diff --git a/application/src/components/node/NodePlaceholder.tsx b/application/src/components/node/NodePlaceholder.tsx
index adf033c..3684346 100644
--- a/application/src/components/node/NodePlaceholder.tsx
+++ b/application/src/components/node/NodePlaceholder.tsx
@@ -1,23 +1,30 @@
 import React, { ReactElement } from 'react'
 import SoftwareBadgePlaceholder from '../SoftwareBadgePlaceholder'
 
-export default function NodePlaceholder (): ReactElement {
+const Row = (): ReactElement => <tr>
+    <td className={'placeholder-glow'}><span className={'placeholder col-10'}/></td>
+    <td>
+        <div><SoftwareBadgePlaceholder /></div>
+        <div className={'placeholder-glow'}><span className={'placeholder col-5'}/></div>
+    </td>
+    <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
+    <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
+    <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
+    <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
+    <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
+    <td className={' placeholder-glow'}><span className={'placeholder col-6'}/></td>
+    <td className={' placeholder-glow'}><span className={'placeholder col-6'}/></td>
+</tr>
+
+export default function NodePlaceholder ({ rowCount }: { rowCount?: number }): ReactElement {
+  if (rowCount === undefined || rowCount <= 0) {
+    rowCount = 1
+  }
   return (
-        <tbody>
-        <tr>
-            <td className={'placeholder-glow'}><span className={'placeholder col-10'}/></td>
-            <td>
-                <div><SoftwareBadgePlaceholder /></div>
-                <div className={'placeholder-glow'}><span className={'placeholder col-5'}/></div>
-            </td>
-            <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
-            <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
-            <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
-            <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
-            <td className={'text-end placeholder-glow'}><span className={'placeholder col-3'}/></td>
-            <td className={' placeholder-glow'}><span className={'placeholder col-6'}/></td>
-            <td className={' placeholder-glow'}><span className={'placeholder col-6'}/></td>
-        </tr>
+        <tbody className={'placeholder-wrapper'} aria-hidden="true">
+        {[...Array(rowCount).keys()].map(key => {
+          return <Row key={key}/>
+        })}
         </tbody>
   )
 }
diff --git a/application/src/components/node/NodeSearch.tsx b/application/src/components/node/NodeSearch.tsx
index fcb0e9c..94c35c6 100644
--- a/application/src/components/node/NodeSearch.tsx
+++ b/application/src/components/node/NodeSearch.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useQuery } from '@apollo/client'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { z } from 'zod'
 import {
@@ -38,7 +38,7 @@ export default function NodeSearch (): ReactElement {
   const matomo = useMatomo()
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const router = useRouter()
+  const [lastRowCount, setLastRowCount] = useState<number>(1)
   let routerQuery: NodeQueryInput
   try {
     routerQuery = nodeQueryInputSchema.parse(Object.fromEntries(searchParams))
@@ -49,10 +49,10 @@ export default function NodeSearch (): ReactElement {
       sortWay: SortingWayEnum.Desc
     }
   }
-  console.log('Router query', routerQuery)
   const [query, setQuery] = useState<NodeQueryInput>(routerQuery)
   const [page, setPage] = useState<number>(0)
-  const [pageLoading, setPageLoading] = useState<boolean>(false)
+  const [pageLoading, setPageLoading] = useState<undefined | 'sort' | 'submit' | 'more'>(undefined)
+
   const { loading, error, data, fetchMore, refetch } = useQuery(ListNodesDocument, {
     variables: {
       query,
@@ -62,6 +62,14 @@ export default function NodeSearch (): ReactElement {
     }
   })
 
+  useEffect(() => {
+    const items = data?.listNodes?.items
+    if (items === undefined) {
+      return
+    }
+    setLastRowCount(items.length)
+  }, [data])
+
   useEffect(() => {
     matomo.trackEvent({
       category: 'nodes',
@@ -75,7 +83,7 @@ export default function NodeSearch (): ReactElement {
     })
   }, [page])
   useEffect((): void => {
-    router.push(`${pathname ?? ''}?${createUrlSearchParams(query).toString()}`)
+    window.history.replaceState({}, '', `${pathname ?? ''}?${createUrlSearchParams(query).toString()}`)
     matomo.trackEvent({
       category: 'nodes',
       action: 'new-search'
@@ -89,17 +97,17 @@ export default function NodeSearch (): ReactElement {
   }
 
   const handleSearchSubmit = async (): Promise<void> => {
-    setPageLoading(true)
+    setPageLoading('submit')
     setQuery(query)
     setPage(0)
     await refetch({ paging: { page: 0 } })
-    setPageLoading(false)
+    setPageLoading(undefined)
   }
 
   const handleLoadMore = async (): Promise<void> => {
     setPage(page + 1)
     console.info('Loading next page', { query, page })
-    setPageLoading(true)
+    setPageLoading('more')
     await fetchMore({
       variables: {
         paging: { page: page + 1 }
@@ -121,7 +129,7 @@ export default function NodeSearch (): ReactElement {
         return fetchMoreResult
       }
     })
-    setPageLoading(false)
+    setPageLoading(undefined)
   }
 
   const toggleSort = (sortBy: NodeSortingByEnum): void => {
@@ -145,15 +153,18 @@ export default function NodeSearch (): ReactElement {
 
   return (
         <>
-            <NodeForm query={query} onQueryChange={handleQueryChange} onSubmit={handleSearchSubmit}/>
+            <NodeForm query={query} onQueryChange={handleQueryChange} onSubmit={handleSearchSubmit} loading={loading || pageLoading !== undefined}/>
             <ResponsiveTable>
                 <NodeHeader onSortToggle={toggleSort} query={query}/>
-                <Loader loading={loading || pageLoading} showBottom={true} placeholder={(<NodePlaceholder/>)}>
+                <Loader
+                    loading={loading || pageLoading !== undefined}
+                    showBottom={true}
+                    placeholder={(<NodePlaceholder rowCount={pageLoading === 'more' ? 1 : lastRowCount}/>)}>
                     <NodeResults nodes={data?.listNodes?.items}/>
                 </Loader>
             </ResponsiveTable>
             <LoadMoreButton onClick={handleLoadMore}
-                            show={!loading && !pageLoading && data?.listNodes?.paging?.hasNext === true}/>
+                            show={!loading && pageLoading === undefined && data?.listNodes?.paging?.hasNext === true}/>
             <ErrorMessage message={error?.message}/>
         </>
   )
diff --git a/application/src/components/server/Layout.tsx b/application/src/components/server/Layout.tsx
index 875f15b..93a6b85 100644
--- a/application/src/components/server/Layout.tsx
+++ b/application/src/components/server/Layout.tsx
@@ -1,25 +1,21 @@
 import React, { ReactElement, ReactNode } from 'react'
 import ClientConfig from '../../config/ClientConfig'
 import 'server-only'
-import '../../styles/global.scss'
 import ClientLayout from '../layout/ClientLayout'
 import ClientProviders from '../layout/ClientProviders'
 
 export default function Layout ({
   children,
   config,
-  title,
-  description
+  title
 }: {
   children?: ReactNode
   config: ClientConfig
   title: string
-  description: string
 }): ReactElement {
-  console.log('Layout')
   return (
     <ClientProviders config={config}>
-      <ClientLayout title={title} description={description}>
+      <ClientLayout title={title}>
         {children}
       </ClientLayout>
     </ClientProviders>
diff --git a/application/src/components/stats/Stats.tsx b/application/src/components/stats/Stats.tsx
index 5c2a9e5..0c1d4ad 100644
--- a/application/src/components/stats/Stats.tsx
+++ b/application/src/components/stats/Stats.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useQuery } from '@apollo/client'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import React, { ReactElement, useEffect, useState } from 'react'
 import {
   ListStatsDocument,
@@ -30,7 +30,6 @@ export default function Stats (): ReactElement {
   })
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const router = useRouter()
   const matomo = useMatomo()
   let routerQuery: StatsQueryInput
   try {
@@ -42,7 +41,6 @@ export default function Stats (): ReactElement {
       sortWay: SortingWayEnum.Desc
     }
   }
-  console.log('Router query', routerQuery)
   const [query, setQuery] = useState<StatsQueryInput>(routerQuery)
   const { loading, error, data } = useQuery(ListStatsDocument, {
     variables: {
@@ -59,7 +57,7 @@ export default function Stats (): ReactElement {
     setLastSum(sum)
   }, [data])
   useEffect(() => {
-    router.push(`${pathname ?? ''}?${createUrlSearchParams(query).toString()}`)
+    window.history.replaceState({}, '', `${pathname ?? ''}?${createUrlSearchParams(query).toString()}`)
     matomo.trackEvent({
       category: 'stats',
       action: 'new-search'
diff --git a/application/src/components/stats/StatsPlaceholder.tsx b/application/src/components/stats/StatsPlaceholder.tsx
index a199c99..5848d77 100644
--- a/application/src/components/stats/StatsPlaceholder.tsx
+++ b/application/src/components/stats/StatsPlaceholder.tsx
@@ -24,8 +24,11 @@ const Row = (): ReactElement => <tr>
 </tr>
 
 export default function StatsPlaceholder ({ rowCount }: { rowCount?: number }): ReactElement {
-  return <tbody>
-        {[...Array(rowCount ?? 1).keys()].map(key => {
+  if (rowCount === undefined || rowCount <= 0) {
+    rowCount = 1
+  }
+  return <tbody className="placeholder-wrapper" aria-hidden="true">
+        {[...Array(rowCount).keys()].map(key => {
           return <Row key={key}/>
         })}
         </tbody>
diff --git a/application/src/styles/global.scss b/application/src/styles/global.scss
index 5fc7179..9a9acbf 100644
--- a/application/src/styles/global.scss
+++ b/application/src/styles/global.scss
@@ -137,4 +137,6 @@ table.stats {
   }
 }
 
-
+.placeholder-wrapper{
+  cursor: wait;
+}