working quite nicely

website/src/components/SearchPage/SearchFullUI.tsx

@@ -170,10 +170,13 @@ export const InnerSearchFullUI = ({
     const detailsHook = hooks.useDetails({}, {});
 
     const lapisSearchParameters = useMemo(() => {
+
+
         return getLapisSearchParameters(fieldValues, referenceGenomesSequenceNames);
     }, [fieldValues, referenceGenomesSequenceNames]);
 
     useEffect(() => {
+
         aggregatedHook.mutate({
             ...lapisSearchParameters,
             fields: [],
@@ -199,17 +202,26 @@ export const InnerSearchFullUI = ({
 
     const [oldData, setOldData] = useState<TableSequenceData[] | null>(null);
     const [oldCount, setOldCount] = useState<number | null>(null);
+    const [firstClientSideLoadOfDataCompleted, setFirstClientSideLoadOfDataCompleted] = useState(false);
+    const [firstClientSideLoadOfCountCompleted, setFirstClientSideLoadOfCountCompleted] = useState(false);
+
 
     useEffect(() => {
+
         if (detailsHook.data?.data && oldData !== detailsHook.data.data) {
             setOldData(detailsHook.data.data);
+            setFirstClientSideLoadOfDataCompleted(true);
         }
+
     }, [detailsHook.data?.data, oldData]);
 
     useEffect(() => {
+
         if (aggregatedHook.data?.data && oldCount !== aggregatedHook.data.data[0].count) {
             setOldCount(aggregatedHook.data.data[0].count);
+            setFirstClientSideLoadOfCountCompleted(true);
         }
+
     }, [aggregatedHook.data?.data, oldCount]);
 
 
@@ -281,7 +293,9 @@ export const InnerSearchFullUI = ({
                 {!(totalSequences === undefined && oldCount === null && initialCount===undefined) && (
                     <div
                         className={`
-                        ${detailsHook.isLoading || aggregatedHook.isLoading ? 'opacity-50 pointer-events-none' : ''}
+                        ${ (!(firstClientSideLoadOfCountCompleted&&firstClientSideLoadOfDataCompleted) ? "cursor-wait pointer-events-none" :
+                            
+                            ( (detailsHook.isLoading || aggregatedHook.isLoading)) ? 'opacity-50 pointer-events-none' : '')}
                         `}
                     >
                         <div className='text-sm text-gray-800 mb-6 justify-between flex md:px-6 items-baseline'>
@@ -294,7 +308,7 @@ export const InnerSearchFullUI = ({
                                       : (initialCount !== undefined ? initialCount : '')}{' '}
                                 sequence
                                 {totalSequences === 1 ? '' : 's'}
-                                {detailsHook.isLoading || aggregatedHook.isLoading ? (
+                                {(detailsHook.isLoading || aggregatedHook.isLoading || !firstClientSideLoadOfCountCompleted || !firstClientSideLoadOfDataCompleted) ? (
                                     <span className='loading loading-spinner loading-xs ml-3 appearSlowly'></span>
                                 ) : null}
                             </div>

website/src/components/SearchPage/useQueryAsState.js

@@ -12,7 +12,11 @@ export default function useQueryAsState(defaultDict) {
         for (const [key, value] of urlParams) {
             newDict[key] = value;
         }
-        setValueDict(newDict);
+
+        setValueDict( // only change if actually different
+        (prev) =>
+            JSON.stringify(prev) === JSON.stringify(newDict) ? prev : newDict
+        );
     }, []);
 
     useEffect(() => {

website/src/pages/[organism]/search/index.astro

@@ -33,7 +33,7 @@ const myGroups = accessToken !== undefined ? await getMyGroups(accessToken) : []
 const referenceGenomeSequenceNames = getReferenceGenomesSequenceNames(cleanedOrganism.key);
 
 const initialQueryDict = Object.fromEntries(Astro.url.searchParams.entries());
-const {data, totalCount} = await performLapisSearchQueries(initialQueryDict, schema, referenceGenomeSequenceNames, hiddenFieldValues, cleanedOrganism.key,1,100);
+const {data, totalCount} = await performLapisSearchQueries(initialQueryDict, schema, referenceGenomeSequenceNames, hiddenFieldValues, cleanedOrganism.key);
 ---
 
 <BaseLayout title={`${cleanedOrganism.displayName} - Browse`} noHorizontalPadding>

website/src/utils/search.ts

@@ -18,6 +18,7 @@ export const COLUMN_VISIBILITY_PREFIX = 'column_';
 
 export const ORDER_KEY = 'orderBy';
 export const ORDER_DIRECTION_KEY = 'order';
+export const PAGE_KEY = 'page';
 
 
 export type SearchResponse = {

website/src/utils/serversideSearch.ts

@@ -3,7 +3,8 @@ import type { TableSequenceData } from '../components/SearchPage/Table';
 import type { Schema } from '../types/config';
 import type { ReferenceGenomesSequenceNames } from '../types/referencesGenomes';
 import { LapisClient } from '../services/lapisClient';
-import { getFieldValuesFromQuery, getLapisSearchParameters, ORDER_DIRECTION_KEY, ORDER_KEY, getColumnVisibilitiesFromQuery } from './search';
+import { getFieldValuesFromQuery, getLapisSearchParameters, ORDER_DIRECTION_KEY, ORDER_KEY, PAGE_KEY, getColumnVisibilitiesFromQuery } from './search';
+import { pageSize } from '../settings';
 
 // If these types are not already defined in the new file, you'll need to import or define them:
 export type SearchResponse = {
@@ -19,8 +20,7 @@ export const performLapisSearchQueries = async (
     referenceGenomesSequenceNames: ReferenceGenomesSequenceNames,
     hiddenFieldValues: Record<string, any>,
     organism: string,
-    page: number,
-    pageSize: number
+
 ): Promise<SearchResponse> => {
     const fieldValues = getFieldValuesFromQuery(state, hiddenFieldValues, schema);
     const lapisSearchParameters = getLapisSearchParameters(fieldValues, referenceGenomesSequenceNames);
@@ -29,6 +29,7 @@ export const performLapisSearchQueries = async (
 
     const orderByField = state[ORDER_KEY] ?? schema.defaultOrderBy ?? schema.primaryKey;
     const orderDirection = state[ORDER_DIRECTION_KEY] ?? schema.defaultOrder ?? 'ascending';
+    const page = state[PAGE_KEY] ? parseInt(state[PAGE_KEY]) : 1;
 
     const columnVisibilities = getColumnVisibilitiesFromQuery(schema, state);