@stoker-platform/web-app 0.5.211 → 0.5.213

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @stoker-platform/web-app
 
+## 0.5.213
+
+### Patch Changes
+
+- fix: fix collection change UI flicker
+
+## 0.5.212
+
+### Patch Changes
+
+- feat: improve Algolia search
+    - @stoker-platform/node-client@0.5.83
+    - @stoker-platform/utils@0.5.74
+    - @stoker-platform/web-client@0.5.87
+
 ## 0.5.211
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.211",
+    "version": "0.5.213",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.56.0",
-        "@stoker-platform/node-client": "0.5.82",
-        "@stoker-platform/utils": "0.5.73",
-        "@stoker-platform/web-client": "0.5.86",
+        "@stoker-platform/node-client": "0.5.83",
+        "@stoker-platform/utils": "0.5.74",
+        "@stoker-platform/web-client": "0.5.87",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Cards.tsx

@@ -51,6 +51,7 @@ import { useLocation } from "react-router"
 import { FirestoreError, QueryConstraint, Timestamp, where } from "firebase/firestore"
 import { preloadCacheEnabled } from "./utils/preloadCacheEnabled"
 import { localFullTextSearch } from "./utils/localFullTextSearch"
+import { isServerFullTextSearch } from "./utils/fullTextSearch"
 import { Helmet } from "react-helmet"
 import { useConnection } from "./providers/ConnectionProvider"
 
@@ -525,6 +526,7 @@ interface DropZoneProps {
     backToStart: () => void
     setOptimisticList: (serverList?: StokerRecord[], key?: string | number) => void
     search: string | undefined
+    searchClearing: boolean
 }
 
 function DropZone({
@@ -544,8 +546,9 @@ function DropZone({
     backToStart,
     setOptimisticList,
     search,
+    searchClearing,
 }: DropZoneProps) {
-    const { labels } = collection
+    const { labels, fullTextSearch } = collection
     const { toast } = useToast()
     const { setGlobalLoading } = useGlobalLoading()
     const permissions = getCurrentUserPermissions()
@@ -810,7 +813,6 @@ function DropZone({
 
     const records = useMemo(() => {
         if (!statusList) return []
-        if (typeof orderByField !== "string") return []
         const removeEmptyRecords: StokerRecord[] = []
         let latestFiltered =
             latestList?.filter(
@@ -838,6 +840,10 @@ function DropZone({
                 }
             })
         const dedupedRecords = Array.from(new Map(removeEmptyRecords.map((record) => [record.id, record])).values())
+        if (isServerFullTextSearch(search, collection, isPreloadCacheEnabled, isServerReadOnly)) {
+            return dedupedRecords
+        }
+        if (typeof orderByField !== "string") return []
         let sortedList = sortList(collection, dedupedRecords, orderByField, orderByDirection)
         if (search && (isPreloadCacheEnabled || isServerReadOnly)) {
             const searchResults = localFullTextSearch(collection, search, sortedList).map((result) => result.id)
@@ -854,6 +860,9 @@ function DropZone({
         orderByField,
         orderByDirection,
         search,
+        fullTextSearch,
+        isPreloadCacheEnabled,
+        isServerReadOnly,
     ])
 
     const [isFirstLoad, setIsFirstLoad] = useState(true)
@@ -1044,47 +1053,49 @@ function DropZone({
                 </CardHeader>
             </Card>
             {isOverDebounced && <div className="bg-primary/50 rounded-lg h-full"></div>}
-            <div className={cn(className, "rounded-lg", "space-y-4")}>
-                {isPreloadCacheEnabled || isServerReadOnly ? (
-                    <FixedSizeList
-                        height={height}
-                        width="100%"
-                        itemSize={itemSize}
-                        itemCount={records.length}
-                        itemKey={itemKey}
-                        overscanCount={5}
-                        itemData={itemData}
-                    >
-                        {renderRow}
-                    </FixedSizeList>
-                ) : (
-                    // eslint-disable-next-line security/detect-object-injection
-                    <InfiniteLoader
-                        isItemLoaded={(index) => index < records.length}
+            {!searchClearing && (
+                <div className={cn(className, "rounded-lg", "space-y-4")}>
+                    {isPreloadCacheEnabled || isServerReadOnly ? (
+                        <FixedSizeList
+                            height={height}
+                            width="100%"
+                            itemSize={itemSize}
+                            itemCount={records.length}
+                            itemKey={itemKey}
+                            overscanCount={5}
+                            itemData={itemData}
+                        >
+                            {renderRow}
+                        </FixedSizeList>
+                    ) : (
                         // eslint-disable-next-line security/detect-object-injection
-                        itemCount={100000}
-                        loadMoreItems={() => loadMoreItems(statusValue)}
-                        minimumBatchSize={itemsPerPage || 10}
-                        threshold={itemsPerPage || 40}
-                    >
-                        {({ onItemsRendered, ref }) => (
-                            <FixedSizeList
-                                height={height}
-                                width="100%"
-                                itemSize={itemSize}
-                                itemCount={records.length}
-                                overscanCount={10}
-                                itemKey={itemKey}
-                                ref={ref}
-                                onItemsRendered={onItemsRendered}
-                                itemData={itemData}
-                            >
-                                {renderRow}
-                            </FixedSizeList>
-                        )}
-                    </InfiniteLoader>
-                )}
-            </div>
+                        <InfiniteLoader
+                            isItemLoaded={(index) => index < records.length}
+                            // eslint-disable-next-line security/detect-object-injection
+                            itemCount={100000}
+                            loadMoreItems={() => loadMoreItems(statusValue)}
+                            minimumBatchSize={itemsPerPage || 10}
+                            threshold={itemsPerPage || 40}
+                        >
+                            {({ onItemsRendered, ref }) => (
+                                <FixedSizeList
+                                    height={height}
+                                    width="100%"
+                                    itemSize={itemSize}
+                                    itemCount={records.length}
+                                    overscanCount={10}
+                                    itemKey={itemKey}
+                                    ref={ref}
+                                    onItemsRendered={onItemsRendered}
+                                    itemData={itemData}
+                                >
+                                    {renderRow}
+                                </FixedSizeList>
+                            )}
+                        </InfiniteLoader>
+                    )}
+                </div>
+            )}
         </div>
     )
 }
@@ -1108,6 +1119,7 @@ interface CardsProps {
     setOptimisticList: () => void
     autoUpdateStatusFilter: boolean
     search: string | undefined
+    searchClearing: boolean
     relationList?: boolean
     formList?: boolean
     hasBreadcrumbs?: boolean
@@ -1129,6 +1141,7 @@ export function Cards({
     setOptimisticList,
     autoUpdateStatusFilter,
     search,
+    searchClearing,
     relationList,
     formList,
     hasBreadcrumbs,
@@ -1563,6 +1576,7 @@ export function Cards({
                         backToStart={backToStart}
                         setOptimisticList={setOptimisticList}
                         search={search}
+                        searchClearing={searchClearing}
                     />
                 ))}
             </div>

package/src/Collection.tsx

@@ -90,6 +90,7 @@ import { TooltipProvider } from "./components/ui/tooltip"
 import { Thread } from "./components/assistant-ui/thread"
 import { MyRuntimeProvider } from "./providers/RuntimeProvider"
 import { getFilterDisjunctions } from "./utils/getFilterDisjunctions"
+import { getSearchOptions, isServerFullTextSearch } from "./utils/fullTextSearch"
 import { performFullTextSearch } from "./utils/performFullTextSearch"
 import { CSVLink } from "react-csv"
 import { prepareCSVData } from "./utils/prepareCSVData"
@@ -236,6 +237,12 @@ function Collection({
     const [showCalendar, setShowCalendar] = useState(false)
 
     const [search, setSearch] = useState("")
+    const isServerFullTextSearchActive = isServerFullTextSearch(
+        search,
+        collection,
+        isPreloadCacheEnabled,
+        isServerReadOnly,
+    )
     const [tab, setTab] = useState<string | undefined>("list")
     const tabRef = useRef<string | undefined>(undefined)
     const prevTabRef = useRef<string | undefined>(undefined)
@@ -250,6 +257,19 @@ function Collection({
     const { filters, setFilters, order, setOrder, getFilterConstraints } = useFilters()
     const { orderByField, orderByDirection } = useMemo(() => getOrderBy(collection, order), [order])
     const searchResults = useRef<{ [key: string | number]: string[] | undefined }>({})
+    const [searchClearing, setSearchClearing] = useState(false)
+    const searchClearingRef = useRef(false)
+    const pendingSearchClearingKeys = useRef<Set<string | number>>(new Set())
+    const getSearchClearingKeys = useCallback(
+        (currentTab: string | undefined) =>
+            currentTab === "cards"
+                ? (statusValues.current || []).filter(
+                      (statusValue) =>
+                          !cardsConfig?.excludeValues?.some((excludedValue) => excludedValue === statusValue),
+                  )
+                : ["default"],
+        [cardsConfig],
+    )
     const additionalConstraintsRef = useRef(additionalConstraints)
     additionalConstraintsRef.current = additionalConstraints
     const { currentField: currentFieldAll } = useCache()
@@ -448,6 +468,14 @@ function Collection({
 
     const loadedKeys = useRef<Set<string | number>>(new Set())
     const keysLength = useRef(0)
+    const finishSearchClearingKey = useCallback((key: string | number) => {
+        if (!searchClearingRef.current || !pendingSearchClearingKeys.current.has(key)) return
+        pendingSearchClearingKeys.current.delete(key)
+        if (pendingSearchClearingKeys.current.size === 0) {
+            searchClearingRef.current = false
+            setSearchClearing(false)
+        }
+    }, [])
     const getKeysLength = useCallback(() => {
         let length = 1
         if (tab === "cards") {
@@ -555,18 +583,12 @@ function Collection({
                     relationList,
                     relationParent,
                 })
-                const searchOptions = customization.admin?.searchOptions
-                const exactPhrase = searchOptions?.fuzzy === false && searchOptions?.prefix === false
+                const searchOptions = getSearchOptions(collection)
                 const batchSize =
                     disjunctions === 0
                         ? Math.min(30, itemsPerPage || 10)
                         : Math.min(itemsPerPage || 10, Math.max(1, Math.floor(30 / disjunctions)))
-                let hitsPerPage = 0
-                if (exactPhrase && !(hasEntityRestrictions.length > 0 || hasEntityParentFilters.length > 0)) {
-                    hitsPerPage = 500
-                } else {
-                    hitsPerPage = batchSize
-                }
+                const hitsPerPage = searchOptions?.hitsPerPage || itemsPerPage || 10
                 const constraints = getFilterConstraints(latestFilters, false, true) as [string, "==" | "in", unknown][]
                 const assigning =
                     queryIsAssigning && assignable && relationList && relationCollection && relationParent?.id
@@ -577,26 +599,7 @@ function Collection({
                     return
                 }
                 searchResults.current = { ...searchResults.current, [key]: objectIDs }
-                if (
-                    objectIDs.length > 0 &&
-                    (!exactPhrase || hasEntityRestrictions.length > 0 || hasEntityParentFilters.length > 0)
-                ) {
-                    if (isServerReadOnly) {
-                        query.queries = query.queries.map((q) => ({
-                            ...q,
-                            constraints: [...q.constraints, ["id", "in", objectIDs]] as [
-                                string,
-                                WhereFilterOp,
-                                unknown,
-                            ][],
-                        }))
-                    } else {
-                        query.queries = query.queries.map((q) => ({
-                            ...q,
-                            constraints: [...q.constraints, where("id", "in", objectIDs)] as QueryConstraint[],
-                        }))
-                    }
-                } else if (objectIDs.length > 0 && exactPhrase) {
+                if (objectIDs.length > 0) {
                     for (let i = 0; i < objectIDs.length; i += batchSize) {
                         multipleQueries.push([where("id", "in", objectIDs.slice(i, i + batchSize))])
                     }
@@ -608,6 +611,7 @@ function Collection({
                     setCursor({})
                     setPages({})
                     setCount({})
+                    finishSearchClearingKey(key)
                     return
                 }
             }
@@ -713,6 +717,7 @@ function Collection({
                                     setPages((prev) => ({ ...prev, [key]: newPages || 1 }))
                                     setCount((prev) => ({ ...prev, [key]: newCount }))
                                 }
+                                finishSearchClearingKey(key)
                                 resolve()
                             }
                         }
@@ -772,6 +777,7 @@ function Collection({
                                 console.error(error)
                                 if (isCurrentData()) {
                                     releaseRouteLoading()
+                                    finishSearchClearingKey(key)
                                 }
                                 resolve()
                                 if (error instanceof FirestoreError && error.code === "not-found") {
@@ -793,6 +799,7 @@ function Collection({
                     } catch (error) {
                         if (isCurrentData()) {
                             releaseRouteLoading()
+                            finishSearchClearingKey(key)
                         }
                         reject(error)
                     }
@@ -1421,8 +1428,11 @@ function Collection({
         if (isInitialized) {
             loadedKeys.current = new Set()
             getKeysLength()
+            if (searchClearingRef.current) {
+                pendingSearchClearingKeys.current = new Set(getSearchClearingKeys(tab))
+            }
         }
-    }, [tab, isInitialized])
+    }, [tab, isInitialized, getSearchClearingKeys])
 
     const onChangeSearch = useCallback(
         (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -1431,9 +1441,15 @@ function Collection({
                 setState(`collection-search-${labels.collection.toLowerCase()}`, "search", event.target.value)
             } else {
                 setState(`collection-search-${labels.collection.toLowerCase()}`, "search", "DELETE_STATE")
+                if (fullTextSearch && !isServerReadOnly && !isPreloadCacheEnabled) {
+                    const pendingKeys = getSearchClearingKeys(tabRef.current)
+                    pendingSearchClearingKeys.current = new Set(pendingKeys)
+                    searchClearingRef.current = pendingKeys.length > 0
+                    setSearchClearing(pendingKeys.length > 0)
+                }
             }
         },
-        [table, recordTitleField, isPreloadCacheEnabled, isServerReadOnly],
+        [table, recordTitleField, fullTextSearch, isPreloadCacheEnabled, isServerReadOnly, getSearchClearingKeys],
     )
 
     const excludedFilters = useMemo(() => {
@@ -2035,6 +2051,9 @@ function Collection({
                                         relationList ? "xl:flex-row" : "lg:flex-row",
                                     )}
                                 >
+                                    {!isInitialized && !relationList && (
+                                        <div className="hidden lg:block h-9 shrink-0" aria-hidden="true" />
+                                    )}
                                     {isInitialized && (
                                         <>
                                             {formList && (
@@ -2287,7 +2306,10 @@ function Collection({
                                                                 size="sm"
                                                                 variant="outline"
                                                                 className="h-7 gap-1"
-                                                                disabled={isRouteLoading.has(location.pathname)}
+                                                                disabled={
+                                                                    isRouteLoading.has(location.pathname) ||
+                                                                    isServerFullTextSearchActive
+                                                                }
                                                             >
                                                                 <ChevronsUpDown className="h-3.5 w-3.5" />
                                                                 <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
@@ -2350,9 +2372,10 @@ function Collection({
                                                                                     )
                                                                                 }}
                                                                             >
-                                                                                {order?.field === field.name && (
-                                                                                    <Check className="absolute h-3.5 w-3.5 mr-1" />
-                                                                                )}
+                                                                                {order?.field === field.name &&
+                                                                                    !isServerFullTextSearchActive && (
+                                                                                        <Check className="absolute h-3.5 w-3.5 mr-1" />
+                                                                                    )}
                                                                                 <span className="ml-5">{label}</span>
                                                                             </DropdownMenuItem>
                                                                         )
@@ -2711,6 +2734,7 @@ function Collection({
                                                 backToStartKey={backToStartKey}
                                                 setBackToStartKey={setBackToStartKey}
                                                 search={search}
+                                                searchClearing={searchClearing}
                                                 defaultSort={defaultSort}
                                                 secondarySort={secondarySort}
                                                 setOptimisticList={setOptimisticList}
@@ -2741,6 +2765,7 @@ function Collection({
                                                 setOptimisticList={setOptimisticList}
                                                 autoUpdateStatusFilter={autoUpdateStatusFilter}
                                                 search={search}
+                                                searchClearing={searchClearing}
                                                 relationList={!!relationList}
                                                 formList={!!formList}
                                                 hasBreadcrumbs={hasBreadcrumbs}
@@ -2759,6 +2784,7 @@ function Collection({
                                                 getData={getData}
                                                 unsubscribe={unsubscribe}
                                                 search={search}
+                                                searchClearing={searchClearing}
                                                 backToStartKey={backToStartKey}
                                                 relationList={relationList}
                                                 relationCollection={relationCollection}

package/src/Images.tsx

@@ -36,6 +36,7 @@ import { preloadCacheEnabled } from "./utils/preloadCacheEnabled"
 import cloneDeep from "lodash/cloneDeep.js"
 import isEqual from "lodash/isEqual.js"
 import { localFullTextSearch } from "./utils/localFullTextSearch"
+import { isServerFullTextSearch } from "./utils/fullTextSearch"
 import { Helmet } from "react-helmet"
 import { useConnection } from "./providers/ConnectionProvider"
 import { getSafeUrl } from "./utils/isSafeUrl"
@@ -433,6 +434,7 @@ interface ImagesProps {
     isAssigning?: boolean
     assignable?: Assignable
     hasBreadcrumbs?: boolean
+    searchClearing?: boolean
 }
 
 export const Images = memo(
@@ -454,6 +456,7 @@ export const Images = memo(
         isAssigning,
         assignable,
         hasBreadcrumbs,
+        searchClearing,
     }: ImagesProps) => {
         const { labels, recordTitleField, fullTextSearch } = collection
         const customization = getCollectionConfigModule(labels.collection)
@@ -750,7 +753,6 @@ export const Images = memo(
 
         const groupedRecords = useMemo(() => {
             if (!list) return []
-            if (typeof orderByField !== "string") return []
             const removeEmptyRecords: StokerRecord[] = []
             let latestFiltered = latestList?.filter((record) => filterRecord(record)) || []
             let removedFiltered = removedList
@@ -772,6 +774,15 @@ export const Images = memo(
                     }
                 })
             const dedupedRecords = Array.from(new Map(removeEmptyRecords.map((record) => [record.id, record])).values())
+            if (isServerFullTextSearch(search, collection, isPreloadCacheEnabled, isServerReadOnly)) {
+                const groups: StokerRecord[][] = []
+                if (!columns) return []
+                for (let i = 0; i < dedupedRecords.length; i += columns) {
+                    groups.push(dedupedRecords.slice(i, i + columns))
+                }
+                return groups
+            }
+            if (typeof orderByField !== "string") return []
             const groups: StokerRecord[][] = []
             let sortedList = sortList(collection, dedupedRecords, orderByField, orderByDirection)
             if (search && (isPreloadCacheEnabled || isServerReadOnly)) {
@@ -783,7 +794,17 @@ export const Images = memo(
                 groups.push(sortedList.slice(i, i + columns))
             }
             return groups
-        }, [list, removedList, columns, orderByField, orderByDirection, search])
+        }, [
+            list,
+            removedList,
+            columns,
+            orderByField,
+            orderByDirection,
+            search,
+            fullTextSearch,
+            isPreloadCacheEnabled,
+            isServerReadOnly,
+        ])
 
         const [isFirstLoad, setIsFirstLoad] = useState(true)
         const [prevIds, setPrevIds] = useState<Set<string>>(new Set())
@@ -932,6 +953,8 @@ export const Images = memo(
             )
         }
 
+        if (searchClearing) return null
+
         if (isPreloadCacheEnabled || isServerReadOnly) {
             return (
                 <div

package/src/List.tsx

@@ -83,6 +83,7 @@ import { getOrderBy } from "./utils/getOrderBy"
 import { useLocation } from "react-router"
 import { preloadCacheEnabled } from "./utils/preloadCacheEnabled"
 import { localFullTextSearch } from "./utils/localFullTextSearch"
+import { isExactPhraseSearch, isServerFullTextSearch } from "./utils/fullTextSearch"
 import {
     ChartConfig,
     ChartContainer,
@@ -216,6 +217,7 @@ interface ListProps {
     backToStartKey: number
     setBackToStartKey: React.Dispatch<React.SetStateAction<number>>
     search: string | undefined
+    searchClearing: boolean
     defaultSort:
         | {
               field: string
@@ -252,6 +254,7 @@ export function List({
     backToStartKey,
     setBackToStartKey,
     search,
+    searchClearing,
     defaultSort,
     secondarySort,
     setOptimisticList,
@@ -677,7 +680,12 @@ export function List({
         return allColumns
     }, [fields, isPreloadCacheEnabled, isServerReadOnly, recordTitleField, connectionStatus])
 
-    const isServerFullTextSearch = !!(search && fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly)
+    const isServerFullTextSearchActive = isServerFullTextSearch(
+        search,
+        collection,
+        isPreloadCacheEnabled,
+        isServerReadOnly,
+    )
 
     const isSearchRelevanceOrder = !!(search && isPreloadCacheEnabled)
 
@@ -696,7 +704,7 @@ export function List({
         return list || []
     }, [isPreloadCacheEnabled, isServerReadOnly, list, search])
 
-    const tablePageSize = isServerFullTextSearch ? Math.max(searchList.length, 1) : pageSize
+    const tablePageSize = isServerFullTextSearchActive ? Math.max(searchList.length, 1) : pageSize
 
     const selectedRecords = useMemo(() => {
         const selectedIds = Object.keys(rowSelection)
@@ -706,11 +714,8 @@ export function List({
             .filter((record): record is StokerRecord => record !== undefined)
     }, [rowSelection, searchList])
 
-    const searchOptions = tryFunction(customization.admin?.searchOptions) || {
-        fuzzy: false,
-        prefix: false,
-    }
-    const exactPhrase = searchOptions.fuzzy === false && searchOptions.prefix === false
+    const exactPhrase = isExactPhraseSearch(collection)
+    const disableSortingForSearch = (isSearchRelevanceOrder && !exactPhrase) || isServerFullTextSearchActive
 
     const table = useReactTable<StokerRecord>({
         data: searchList,
@@ -719,7 +724,7 @@ export function List({
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         onSortingChange: (sortingUpdater) => {
-            if (isSearchRelevanceOrder && !exactPhrase) return
+            if (disableSortingForSearch) return
             if (typeof sortingUpdater === "function") {
                 const newSorting = sortingUpdater(sorting)
                 const field = getField(fields, newSorting[0].id)
@@ -759,14 +764,14 @@ export function List({
         onRowSelectionChange: setRowSelection,
         pageCount,
         autoResetPageIndex: false,
-        enableSorting: !isSearchRelevanceOrder || exactPhrase,
+        enableSorting: !disableSortingForSearch,
         state: {
-            sorting: isSearchRelevanceOrder && !exactPhrase ? [] : sorting,
+            sorting: disableSortingForSearch ? [] : sorting,
             columnFilters,
             rowSelection,
             pagination: {
                 pageSize: tablePageSize,
-                pageIndex: isServerFullTextSearch ? 0 : pageIndex,
+                pageIndex: isServerFullTextSearchActive ? 0 : pageIndex,
             },
         },
         onPaginationChange: (updater) => {
@@ -876,7 +881,7 @@ export function List({
             search ? 750 : 250,
         )
 
-        if (isInitialized && (isPreloadCacheEnabled || isServerReadOnly || isServerFullTextSearch)) {
+        if (isInitialized && (isPreloadCacheEnabled || isServerReadOnly || isServerFullTextSearchActive)) {
             setPageIndex(0)
             setState(`collection-page-number-${labels.collection.toLowerCase()}`, "page", 1)
         }
@@ -1078,7 +1083,7 @@ export function List({
     }, [table, list, pageSize, isLoading, cursor, pageNumber, pageCount, constraints, orderByField, orderByDirection])
 
     const canGetNextPage = useCallback(() => {
-        if (isServerFullTextSearch) {
+        if (isServerFullTextSearchActive) {
             return false
         }
         if (isPreloadCacheEnabled || isServerReadOnly) {
@@ -1086,7 +1091,7 @@ export function List({
         } else {
             return !isLoadingDebounced && pageCount && pageNumber < pageCount && list?.length === pageSize
         }
-    }, [table, isLoadingDebounced, pageNumber, pageCount, list, pageSize, isServerFullTextSearch])
+    }, [table, isLoadingDebounced, pageNumber, pageCount, list, pageSize, isServerFullTextSearchActive])
 
     const prevPage = useCallback(() => {
         if (isLoading) return
@@ -1172,7 +1177,7 @@ export function List({
     }, [table, list, pageSize, isLoading, cursor, prevCursor, pageNumber, constraints, orderByField, orderByDirection])
 
     const canGetPrevPage = useCallback(() => {
-        if (isServerFullTextSearch) {
+        if (isServerFullTextSearchActive) {
             return false
         }
         if (isPreloadCacheEnabled || isServerReadOnly) {
@@ -1180,7 +1185,7 @@ export function List({
         } else {
             return !isLoadingDebounced && pageNumber > 1
         }
-    }, [table, isLoadingDebounced, pageNumber, isServerFullTextSearch])
+    }, [table, isLoadingDebounced, pageNumber, isServerFullTextSearchActive])
 
     const onChangePageNumber = useCallback(
         (event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => {
@@ -1826,7 +1831,7 @@ export function List({
                                     )}
                             </div>
                         )}
-                        {pagesLoaded && list && (
+                        {!searchClearing && pagesLoaded && list && (
                             <Table className="list-table">
                                 <TableHeader>
                                     {table.getHeaderGroups().map((headerGroup) => (
@@ -2033,12 +2038,12 @@ export function List({
                 </ScrollArea>
             </Card>
             <div className="flex items-center justify-end space-x-2 py-4 print:hidden">
-                {isServerFullTextSearch && searchList.length > 0 && (
+                {isServerFullTextSearchActive && searchList.length > 0 && (
                     <Badge variant="secondary" className="hidden sm:block">
                         {searchList.length} {searchList.length === 1 ? "result" : "results"}
                     </Badge>
                 )}
-                {pagesLoaded && !isServerFullTextSearch && (
+                {pagesLoaded && !isServerFullTextSearchActive && (
                     <Badge variant="secondary" className="hidden sm:block">
                         Page{" "}
                         {isPreloadCacheEnabled || isServerReadOnly
@@ -2065,7 +2070,7 @@ export function List({
                         />
                     </div>
                 )}
-                {!isServerFullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly && (
+                {!isServerFullTextSearchActive && !isPreloadCacheEnabled && !isServerReadOnly && (
                     <Button
                         type="button"
                         variant="outline"
@@ -2078,7 +2083,7 @@ export function List({
                         Back to start
                     </Button>
                 )}
-                {!isServerFullTextSearch &&
+                {!isServerFullTextSearchActive &&
                     !(
                         !isPreloadCacheEnabled &&
                         !isServerReadOnly &&
@@ -2095,7 +2100,7 @@ export function List({
                             Previous
                         </Button>
                     )}
-                {!isServerFullTextSearch && (
+                {!isServerFullTextSearchActive && (
                     <Button type="button" variant="outline" size="sm" onClick={nextPage} disabled={!canGetNextPage()}>
                         Next
                     </Button>

package/src/utils/fullTextSearch.ts

@@ -0,0 +1,24 @@
+import { CollectionSchema } from "@stoker-platform/types"
+import { getCollectionConfigModule } from "@stoker-platform/web-client"
+
+export const getSearchOptions = (collection: CollectionSchema) => {
+    const customization = getCollectionConfigModule(collection.labels.collection)
+    return (
+        customization.admin?.searchOptions || {
+            fuzzy: false,
+            prefix: false,
+        }
+    )
+}
+
+export const isExactPhraseSearch = (collection: CollectionSchema) => {
+    const searchOptions = getSearchOptions(collection)
+    return searchOptions.fuzzy === false && searchOptions.prefix === false
+}
+
+export const isServerFullTextSearch = (
+    search: string | undefined,
+    collection: CollectionSchema,
+    isPreloadCacheEnabled: boolean | undefined,
+    isServerReadOnly: boolean | undefined,
+) => !!(search && collection.fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly)

package/src/utils/localFullTextSearch.ts

@@ -1,6 +1,6 @@
 import { CollectionSchema, StokerRecord } from "@stoker-platform/types"
-import { getCollectionConfigModule } from "@stoker-platform/web-client"
 import MiniSearch, { Options } from "minisearch"
+import { getSearchOptions, isExactPhraseSearch } from "./fullTextSearch"
 
 const flattenToSearchText = (value: unknown): string => {
     if (value == null) return ""
@@ -42,18 +42,14 @@ export const localFullTextSearch = (
 ) => {
     const { recordTitleField, fullTextSearch } = collection
     const fields = fullTextSearch || [recordTitleField]
-    const customization = getCollectionConfigModule(collection.labels.collection)
-    const searchOptions = customization.admin?.searchOptions || {
-        fuzzy: false,
-        prefix: false,
-    }
+    const searchOptions = getSearchOptions(collection)
 
     if (filter) {
         list = list.filter((record) => filter(record))
     }
 
     const phrase = query.trim().toLowerCase()
-    const exactPhrase = searchOptions.fuzzy === false && searchOptions.prefix === false
+    const exactPhrase = isExactPhraseSearch(collection)
 
     if (exactPhrase) {
         if (!phrase) return []

package/src/utils/runViewTransition.ts

@@ -1,8 +1,13 @@
 import { flushSync } from "react-dom"
 
+const isWebKit =
+    typeof navigator !== "undefined" &&
+    /AppleWebKit/.test(navigator.userAgent) &&
+    !/Chrom(e|ium)|Edg|OPR|Android/.test(navigator.userAgent)
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const runViewTransition = (callback: () => any) => {
-    if (document.startViewTransition && document.visibilityState === "visible") {
+    if (!isWebKit && document.startViewTransition && document.visibilityState === "visible") {
         try {
             const transition = document.startViewTransition(() => {
                 flushSync(() => {