@c-rex/components 0.3.0-build.40 → 0.3.0-build.42

package/src/restriction-menu/restriction-menu-item.tsx

@@ -31,6 +31,7 @@ export const RestrictionNavigationItem: FC<Props> = ({
         history: "push",
     });
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
 
     const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
         shortId,
@@ -49,6 +50,8 @@ export const RestrictionNavigationItem: FC<Props> = ({
                         <Button
                             variant={selected ? "default" : "outline"}
                             rounded="full"
+                            aria-pressed={selected}
+                            disabled={searchNavigationPending}
                             onClick={() => {
                                 startSearchNavigation();
                                 if (shouldRemoveRestrictParam) {
@@ -82,6 +85,7 @@ export const RestrictionDropdownItem: FC<Props> = ({
         history: "push",
     });
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
 
     const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
         shortId,
@@ -97,6 +101,8 @@ export const RestrictionDropdownItem: FC<Props> = ({
                 <TooltipTrigger asChild>
                     <Button
                         variant={selected ? "default" : "ghost"}
+                        aria-pressed={selected}
+                        disabled={searchNavigationPending}
                         onClick={() => {
                             if (onClick) {
                                 onClick();
@@ -141,16 +147,16 @@ function getRestrictionValue({
 
     if (currentRestrict && multipleSelection) {
         if (selected) {
-            const restrictionsLength = currentRestrict.split(",").length;
-            //if there is only one restriction, we can remove the whole restrict param
-            if (restrictionsLength === 1) {
+            const eqIndex = currentRestrict.indexOf("=");
+            if (eqIndex === -1) {
                 shouldRemoveRestrictParam = true;
             } else {
-                restrictParam = currentRestrict.replace(`${shortId}`, "").replace(",,", ",").replace(/(^,)|(,$)/g, "");
-
-                // Remove the restrict param if nothing remains after '='
-                if (/^[^=]+=$/.test(restrictParam)) {
+                const fieldPrefix = currentRestrict.slice(0, eqIndex + 1);
+                const ids = currentRestrict.slice(eqIndex + 1).split(",").filter((id) => id !== shortId);
+                if (ids.length === 0) {
                     shouldRemoveRestrictParam = true;
+                } else {
+                    restrictParam = fieldPrefix + ids.join(",");
                 }
             }
         } else {

package/src/restriction-menu/restriction-menu-logic.ts

@@ -0,0 +1,51 @@
+type FetchMode = "all" | "deferred";
+
+export type ResolvedMenuState = {
+    restrict: string[];
+    resolvedPageSize: number;
+    hasMoreItems: boolean;
+};
+
+export function resolveMenuState({
+    queryRestrict = [],
+    onlyUsedEntries = true,
+    fetchMode = "deferred",
+    loadAll = false,
+    maxItemsByRow,
+    explicitPageSize,
+    itemCount,
+    totalItemCount,
+}: {
+    queryRestrict?: string[];
+    onlyUsedEntries?: boolean;
+    fetchMode?: FetchMode;
+    loadAll?: boolean;
+    maxItemsByRow: number;
+    explicitPageSize?: number;
+    itemCount: number;
+    totalItemCount?: number;
+}): ResolvedMenuState {
+    const restrict = onlyUsedEntries
+        ? ["hasInformationUnits=true", ...queryRestrict]
+        : queryRestrict;
+
+    const resolvedPageSize = explicitPageSize
+        ? explicitPageSize
+        : fetchMode === "deferred" && !loadAll
+        ? Math.max(maxItemsByRow, 1)
+        : 100;
+
+    const hasMoreFromServer =
+        typeof totalItemCount === "number" ? totalItemCount > itemCount : false;
+    const allItemsLoaded =
+        typeof totalItemCount === "number" && itemCount >= totalItemCount;
+    const hasMoreItems =
+        hasMoreFromServer ||
+        (!explicitPageSize &&
+            !allItemsLoaded &&
+            fetchMode === "deferred" &&
+            !loadAll &&
+            itemCount >= resolvedPageSize);
+
+    return { restrict, resolvedPageSize, hasMoreItems };
+}

package/src/restriction-menu/taxonomy-restriction-menu.tsx

@@ -6,6 +6,7 @@ import { FC, ReactNode, useMemo, useState } from "react";
 import * as ComponentOptions from "../generated/client-components";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { RestrictionSelectionMenu } from "./restriction-selection-menu";
+import { resolveMenuState } from "./restriction-menu-logic";
 import { DEVICE_OPTIONS } from "@c-rex/constants";
 
 type GenericRequestData = {
@@ -62,18 +63,21 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
 }) => {
     const [loadAll, setLoadAll] = useState(false);
     const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
-    const queryRestrict = queryParams?.Restrict || [];
-    const restrict = onlyUsedEntries ? ["hasInformationUnits=true", ...queryRestrict] : queryRestrict;
+    const queryRestrict = useMemo(() => queryParams?.Restrict || [], [queryParams?.Restrict]);
     const explicitPageSize =
         Number.isFinite(Number(queryParams?.PageSize)) && Number(queryParams?.PageSize) > 0
             ? Number(queryParams?.PageSize)
             : undefined;
     const maxItemsByRow = useMemo(() => Math.max(...Object.values(itemsByRow)), [itemsByRow]);
-    const resolvedPageSize = useMemo(() => {
-        if (explicitPageSize) return explicitPageSize;
-        if (fetchMode === "deferred" && !loadAll) return Math.max(maxItemsByRow, 1);
-        return 100;
-    }, [explicitPageSize, fetchMode, maxItemsByRow, loadAll]);
+    const { restrict, resolvedPageSize } = useMemo(() => resolveMenuState({
+        queryRestrict,
+        onlyUsedEntries,
+        fetchMode,
+        loadAll,
+        maxItemsByRow,
+        explicitPageSize,
+        itemCount: 0,
+    }), [queryRestrict, onlyUsedEntries, fetchMode, loadAll, maxItemsByRow, explicitPageSize]);
     const requestedFields = Array.isArray(queryParams?.Fields) ? queryParams.Fields : undefined;
     const resolvedFields = useMemo(() => {
         const baseFields = requestedFields && requestedFields.length > 0 ? requestedFields : ["labels"];
@@ -102,9 +106,16 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
                 if (!data) return null;
 
                 const itemCount = data.items?.length || 0;
-                const totalItemCount = data.pageInfo?.totalItemCount;
-                const hasMoreFromServer = typeof totalItemCount === "number" ? totalItemCount > itemCount : false;
-                const hasMoreItems = hasMoreFromServer || (explicitPageSize ? false : (fetchMode === "deferred" && !loadAll && itemCount >= resolvedPageSize));
+                const { hasMoreItems } = resolveMenuState({
+                    queryRestrict,
+                    onlyUsedEntries,
+                    fetchMode,
+                    loadAll,
+                    maxItemsByRow,
+                    explicitPageSize,
+                    itemCount,
+                    totalItemCount: data.pageInfo?.totalItemCount,
+                });
 
                 return (
                     <RestrictionSelectionMenu

package/src/results/filter-navbar.tsx

@@ -47,6 +47,7 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
     const { setIsMobileFiltersOpen } = useFilterSidebarState();
     const restrictionList = useRestrictionStore((state) => state.restrictionList);
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
     const effectiveFacetPresentation = facetPresentation || facetLabelOverrides;
     const [params, setParams] = useQueryStates({
         language: parseAsString.withDefault(useSearchSettingsStore.getState().language || ''),
@@ -207,7 +208,7 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
     }
 
     return (
-        <div className="pb-4 flex flex-wrap gap-1">
+        <div className={`pb-4 flex flex-wrap gap-1 transition-opacity duration-150${searchNavigationPending ? " opacity-60 pointer-events-none" : ""}`}>
             {hasMobileFilters && (
                 <Button
                     size="sm"

package/src/results/filter-sidebar/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { FC, useEffect, useMemo, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { useLocale, useTranslations } from 'next-intl'
-import { Check, ChevronDown, ChevronRight } from "lucide-react"
+import { Check, ChevronDown, ChevronRight, Loader2 } from "lucide-react"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@c-rex/ui/collapsible";
 import { useBreakpoint } from "@c-rex/ui/hooks";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@c-rex/ui/sheet";
@@ -76,6 +76,7 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
         shallow: false,
     });
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
     const effectiveFacetPresentation = facetPresentation || facetLabelOverrides;
 
     const filteredTags = useMemo(() => {
@@ -105,6 +106,7 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
     };
 
     const onClickHandler = (key: string, item: FilterItem) => {
+        if (!item.active && item.hits === 0) return;
         startSearchNavigation();
         if (item.active) {
             setParams(removeFilterItem(key, item, params.filter))
@@ -171,20 +173,24 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
 
         return (
             <>
-                {visibleItems.map((item) => (
-                    <SidebarMenuSubItem key={item.shortId}>
-                        <SidebarMenuSubButton
-                            className="cursor-pointer !py-1.5"
-                            data-taxonomy-id={item.taxonomyId}
-                            data-taxonomy-short-id={item.shortId}
-                            isActive={item.active}
-                            onClick={() => onClickHandler(key, item)}
-                        >
-                            {item.label} ({item.hits}/{item.total})
-                            {item.active && <Check className="ml-2" />}
-                        </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                ))}
+                {visibleItems.map((item) => {
+                    const isDisabled = !item.active && item.hits === 0;
+                    return (
+                        <SidebarMenuSubItem key={item.shortId}>
+                            <SidebarMenuSubButton
+                                className={isDisabled ? "!py-1 opacity-40 cursor-not-allowed" : "cursor-pointer !py-1"}
+                                data-taxonomy-id={item.taxonomyId}
+                                data-taxonomy-short-id={item.shortId}
+                                isActive={item.active}
+                                aria-disabled={isDisabled}
+                                onClick={() => onClickHandler(key, item)}
+                            >
+                                {item.label} ({item.hits}/{item.total})
+                                {item.active && <Check className="ml-2" />}
+                            </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                    );
+                })}
                 {(hasMoreItems || canShowLess) && (
                     <SidebarMenuSubItem>
                         <div className="flex items-center gap-3 px-2">
@@ -222,20 +228,24 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
 
         return (
             <>
-                {visibleItems.map((item) => (
-                    <SidebarMenuSubItem key={item.shortId}>
-                        <SidebarMenuSubButton
-                            className="cursor-pointer !py-1.5"
-                            data-taxonomy-id={item.taxonomyId}
-                            data-taxonomy-short-id={item.shortId}
-                            isActive={item.active}
-                            onClick={() => onClickHandler(facetKey, item)}
-                        >
-                            {item.label} ({item.hits}/{item.total})
-                            {item.active && <Check className="ml-2" />}
-                        </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                ))}
+                {visibleItems.map((item) => {
+                    const isDisabled = !item.active && item.hits === 0;
+                    return (
+                        <SidebarMenuSubItem key={item.shortId}>
+                            <SidebarMenuSubButton
+                                className={isDisabled ? "!py-1 opacity-40 cursor-not-allowed" : "cursor-pointer !py-1"}
+                                data-taxonomy-id={item.taxonomyId}
+                                data-taxonomy-short-id={item.shortId}
+                                isActive={item.active}
+                                aria-disabled={isDisabled}
+                                onClick={() => onClickHandler(facetKey, item)}
+                            >
+                                {item.label} ({item.hits}/{item.total})
+                                {item.active && <Check className="ml-2" />}
+                            </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                    );
+                })}
                 {(hasMoreItems || canShowLess) && (
                     <SidebarMenuSubItem>
                         <div className="flex items-center gap-3 px-2">
@@ -298,7 +308,7 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                             <span className={toggleSlotClass} aria-hidden="true" />
                         )}
                         <SidebarMenuSubButton
-                            className={item.isStructural ? "!py-1.5 cursor-default text-muted-foreground" : "cursor-pointer !py-1.5"}
+                            className={item.isStructural ? "!py-1 cursor-default text-muted-foreground" : "cursor-pointer !py-1"}
                             data-taxonomy-id={item.taxonomyId}
                             data-taxonomy-short-id={item.shortId}
                             isActive={item.active}
@@ -320,7 +330,7 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
     };
 
     const content = (
-        <SidebarContent className="!gap-0 capitalize" suppressHydrationWarning>
+        <SidebarContent className={`!gap-1.5 p-1.5 capitalize${searchNavigationPending ? " opacity-60 pointer-events-none" : ""}`} suppressHydrationWarning>
             {Object.entries(filteredTags).map(([key, value]) => {
                 const items = value as ResolvedFilterItem[];
                 const hasTaxonomy = Boolean(resolveFacetTaxonomy(key, facetTaxonomies));
@@ -337,21 +347,21 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                     <div
                         key={key}
                         data-filter-group-key={key}
-                        className="border-b border-border/40 pb-1 mb-1 last:border-b-0 last:mb-0"
+                        className="rounded-md border border-border/40 overflow-hidden bg-background/50"
                     >
                         {!hasSectionLabels && (
                             <Collapsible defaultOpen className="py-0 group/collapsible">
-                                <SidebarGroup className="!p-1">
-                                    <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold">
-                                        <CollapsibleTrigger className="!h-8 capitalize">
+                                <SidebarGroup className="!p-0">
+                                    <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-xs font-bold bg-muted/30">
+                                        <CollapsibleTrigger className="!h-7 capitalize rounded-none px-2">
                                             {propertyLabel}
                                             <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                                         </CollapsibleTrigger>
                                     </SidebarGroupLabel>
                                     <CollapsibleContent>
-                                        <SidebarGroupContent>
-                                            <SidebarMenu className="!gap-0.5">
-                                                <SidebarMenuSub className="!ml-2 !pl-1.5 !py-0 !gap-0.5">
+                                        <SidebarGroupContent className="pb-1">
+                                            <SidebarMenu className="!gap-0">
+                                                <SidebarMenuSub className="!ml-1.5 !pl-1 !py-0.5 !gap-0">
                                                     {!hierarchicalFacet && renderFacetItems(key, items)}
                                                     {hierarchicalFacet && visibleRoots.map((item) => renderHierarchyNode(key, item, hierarchy!.children, 0))}
                                                     {hierarchicalFacet && (hasMoreRoots || canShowLessRoots) && (
@@ -411,22 +421,22 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                                             <Collapsible
                                                 defaultOpen
                                                 key={`${key}:${sectionLabel}`}
-                                                className="py-0 group/collapsible"
+                                                className="py-0 group/collapsible border-t border-border/30 first:border-t-0"
                                             >
-                                                <SidebarGroup className="!p-1">
+                                                <SidebarGroup className="!p-0">
                                                     <SidebarGroupLabel
                                                         asChild
-                                                        className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold"
+                                                        className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-xs font-bold bg-muted/30"
                                                     >
-                                                        <CollapsibleTrigger className="!h-8">
+                                                        <CollapsibleTrigger className="!h-7 rounded-none px-2">
                                                             {sectionLabel}
                                                             <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                                                         </CollapsibleTrigger>
                                                     </SidebarGroupLabel>
                                                     <CollapsibleContent>
-                                                        <SidebarGroupContent>
-                                                            <SidebarMenu className="!gap-0.5">
-                                                                <SidebarMenuSub className="!ml-2 !pl-1.5 !py-0 !gap-0.5">
+                                                        <SidebarGroupContent className="pb-1">
+                                                            <SidebarMenu className="!gap-0">
+                                                                <SidebarMenuSub className="!ml-1.5 !pl-1 !py-0.5 !gap-0">
                                                                     {shouldRenderSectionHierarchy && !hasNestedGroups &&
                                                                         visibleSectionRoots.map((item) => renderHierarchyNode(key, item, sectionHierarchy!.children, 0))}
                                                                     {shouldRenderSectionHierarchy && !hasNestedGroups && (hasMoreSectionRoots || canShowLessSectionRoots) && (
@@ -500,7 +510,10 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                     className="w-[calc(100vw-2rem)] max-w-sm overflow-y-auto !px-2 !pt-6 lg:hidden"
                 >
                     <SheetHeader className="justify-center items-end font-bold">
-                        <SheetTitle>{t("filter.filters")}</SheetTitle>
+                        <SheetTitle className="flex items-center gap-2">
+                            {t("filter.filters")}
+                            {searchNavigationPending && <Loader2 className="size-3.5 animate-spin text-muted-foreground" />}
+                        </SheetTitle>
                         <span className="text-xs text-muted-foreground leading-5">
                             {totalItemCount} {t("results.results")}
                         </span>
@@ -509,9 +522,12 @@ const FilterSidebar: FC<FilterSidebarProps> = ({
                 </SheetContent>
             </Sheet>
 
-            <div className="hidden w-60 rounded-md border bg-sidebar pb-4 lg:block lg:w-80">
+            <div className="hidden w-56 rounded-md border bg-sidebar pb-2 lg:block lg:w-72">
                 <SidebarHeader className="justify-center items-end font-bold">
-                    {t("filter.filters")}
+                    <span className="flex items-center gap-2">
+                        {t("filter.filters")}
+                        {searchNavigationPending && <Loader2 className="size-3.5 animate-spin text-muted-foreground" />}
+                    </span>
                     <span className="text-xs text-muted-foreground leading-5">
                         {totalItemCount} {t("results.results")}
                     </span>

package/src/results/generic/search-results-client.tsx

@@ -184,7 +184,7 @@ const SearchResultsBody = <TItem extends CommonItemsModel>({
                     excludeProperties={facetExcludeProperties}
                 />
 
-                <div className="flex-1 flex flex-col gap-4">
+                <div className={`flex-1 flex flex-col gap-4 transition-opacity duration-150${isLoading ? " opacity-60 pointer-events-none" : ""}`}>
                     {Number(data.pageInfo.pageCount) > 1 && (
                         <Pagination pageInfo={data.pageInfo} className="pt-0" />
                     )}

package/src/results/information-unit-search-results-card-list.tsx

@@ -34,6 +34,7 @@ export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResul
     descriptionFragmentSubjectIds = [],
 }) => {
     const t = useTranslations();
+    const tTypes = useTranslations("itemTypes");
 
     return (
         <div className="flex-1">
@@ -91,7 +92,7 @@ export const InformationUnitSearchResultsCardList: FC<InformationUnitSearchResul
                             </span>
 
                             <div>
-                                <Badge>{itemType}</Badge>
+                                <Badge>{tTypes(itemType.toLowerCase() as any) ?? itemType}</Badge>
                             </div>
                             <span className="text-sm">
                                 <HtmlRendition

package/src/results/information-unit-search-results-cards.tsx

@@ -5,7 +5,7 @@ import { FC, useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { cn, formatDateToLocale } from "@c-rex/utils";
 import { Badge } from "@c-rex/ui/badge";
-import { useLocale } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import { TopicsResponseItem } from "@c-rex/interfaces";
 import { Card } from "@c-rex/ui/card";
 import { useQueryState } from "nuqs";
@@ -28,6 +28,7 @@ const InformationUnitSearchResultCard: FC<{
     index: number;
     query: string | null;
 }> = ({ item, index, query }) => {
+    const t = useTranslations();
     const locale = useLocale();
     const date = formatDateToLocale(item.created!, locale);
     const cardRef = useRef<HTMLDivElement>(null);
@@ -67,7 +68,7 @@ const InformationUnitSearchResultCard: FC<{
                                 fetch(url)
                                     .then(r => r.json())
                                     .then(vcard => ({ name: vcard.fullName || "", photo: vcard.photos?.[0]?.source || null }))
-                                    .catch(() => null)
+                                    .catch((): { name: string; photo: string | null } | null => null)
                             )
                         ).then(results => {
                             setCardData(prev => ({
@@ -170,8 +171,8 @@ const InformationUnitSearchResultCard: FC<{
                 </div>
 
                 {!item.disabled && (
-                    <Link href={item.link} className="absolute inset-0">
-                        <span className="sr-only">View article</span>
+                    <Link href={item.link} className="absolute inset-0" aria-label={t("results.viewArticle")}>
+                        <span className="sr-only">{t("results.viewArticle")}</span>
                     </Link>
                 )}
             </Card>

package/src/results/information-unit-search-results-table.tsx

@@ -18,7 +18,9 @@ const IconsToFileExtension: Record<string, React.ReactNode> = {
 };
 
 const InformationUnitSearchResultsTable: FC<InformationUnitSearchResultsTableProps> = ({ items }) => {
-    const t = useTranslations("results")
+    const t = useTranslations("results");
+    const tRoot = useTranslations();
+    const tTypes = useTranslations("itemTypes");
     const [query] = useQueryState("search");
 
 
@@ -55,7 +57,7 @@ const InformationUnitSearchResultsTable: FC<InformationUnitSearchResultsTablePro
 
                     <div className="w-4/5 md:w-1/5 p-2">
                         <Badge variant="secondary">
-                            {item.type}
+                            {tTypes(item.type.toLowerCase() as any) ?? item.type}
                         </Badge>
                     </div>
 
@@ -78,12 +80,12 @@ const InformationUnitSearchResultsTable: FC<InformationUnitSearchResultsTablePro
                                             <DropdownMenuContent>
                                                 <DropdownMenuItem>
                                                     <a href={item.files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <Eye className="mr-2" /> Open {/*TODO: use i18n functions*/}
+                                                        <Eye className="mr-2" /> {tRoot("open")}
                                                     </a>
                                                 </DropdownMenuItem>
                                                 <DropdownMenuItem>
                                                     <a href={item.files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <CloudDownload className="mr-2" /> Download {/*TODO: use i18n functions*/}
+                                                        <CloudDownload className="mr-2" /> {tRoot("download")}
                                                     </a>
                                                 </DropdownMenuItem>
                                             </DropdownMenuContent>

package/src/results/pagination.tsx

@@ -14,6 +14,7 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { ResultContainerPageInfoModel } from "@c-rex/interfaces";
 import { useTranslations } from "next-intl";
 import { cn } from "@c-rex/utils";
+import { useSearchNavigationStore } from "../stores/search-navigation-store";
 
 interface PaginationProps {
     pageInfo: ResultContainerPageInfoModel;
@@ -67,6 +68,7 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
     const t = useTranslations("results");
     const pathname = usePathname();
     const searchParams = useSearchParams();
+    const searchNavigationPending = useSearchNavigationStore((state) => state.pending);
 
     const pageNumber = pageInfo.pageNumber || 1;
     const pageCount = pageInfo.pageCount || 1;
@@ -78,7 +80,7 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo, className }) => {
     const search = currentSearch.length > 0 ? `?${currentSearch}` : "";
 
     return (
-        <div className={cn("flex flex-col gap-3 py-4", className)}>
+        <div className={cn("flex flex-col gap-3 py-4 transition-opacity duration-150", searchNavigationPending ? "opacity-60 pointer-events-none" : "", className)}>
             <PaginationUI className="py-4 items-center justify-center sm:justify-between">
                 <span className="hidden sm:block text-sm text-muted-foreground">
                     {t("paginationResults", {

package/src/stores/search-settings-store.ts

@@ -25,8 +25,6 @@ export type SearchSettingsState = {
     wildcard: WildCardType,
     operator: OperatorType,
     like: boolean,
-    facetExcludeProperties?: string[],
-    metadataExcludeProperties?: string[],
 }
 
 export type SearchSettingsStore = SearchSettingsState & {
@@ -38,8 +36,6 @@ export const defaultSearchSettings: SearchSettingsState = {
     wildcard: WILD_CARD_OPTIONS.BOTH,
     operator: OPERATOR_OPTIONS.OR,
     like: false,
-    facetExcludeProperties: [],
-    metadataExcludeProperties: [],
 }
 
 /**