Search improvements + better loader

src/Components/DataBatchContext.tsx

@@ -1,11 +1,13 @@
-import { createContext, useState } from 'react'
+import { createContext, useCallback, useState } from 'react'
 import { connect, useData, Obj, Widget, ContentTag } from 'scrivito'
 
 export const DataBatchContext = createContext<{
+  combinedLoaderKey: string
   hasMore: () => boolean
   loadMore: () => void
   setSearch?: (query: string) => void
 }>({
+  combinedLoaderKey: '',
   hasMore: () => true,
   loadMore: () => {
     throw new Error('loadMore is not provided!')
@@ -28,22 +30,32 @@ export const DataBatchContextProvider = connect(
     const configuredLimit = dataScope.limit() ?? 20
     const [limit, setLimit] = useState(configuredLimit)
     const [initialLimit, setInitialLimit] = useState(configuredLimit)
-    const [search, setSearch] = useState('')
+    const [search, setSearchState] = useState('')
+
+    const setSearch = useCallback(
+      (query: string) => {
+        setSearchState(query)
+        setLimit(configuredLimit)
+      },
+      [configuredLimit],
+    )
 
     if (initialLimit !== configuredLimit) {
       setInitialLimit(configuredLimit)
       setLimit(configuredLimit)
     }
 
-    const key = [
+    const baseKeys = [
       'DataBatchContextProvider',
       content.id(),
       attribute,
       id,
       tag,
       search,
       // limit is intentionally not included in the key. Otherwise the component would show a loading spinner on every "load more" click.
-    ].join('-')
+    ]
+
+    const combinedLoaderKey = [...baseKeys, limit].join('-')
 
     const transform = { limit, search }
 
@@ -61,11 +73,13 @@ export const DataBatchContextProvider = connect(
     const loadMore = () => setLimit((prevLimit) => prevLimit + configuredLimit)
 
     return (
-      <DataBatchContext.Provider value={{ hasMore, loadMore, setSearch }}>
+      <DataBatchContext.Provider
+        value={{ combinedLoaderKey, hasMore, loadMore, setSearch }}
+      >
         <ContentTag
           tag={tag}
           id={id}
-          key={key}
+          key={baseKeys.join('-')}
           content={content}
           attribute={attribute}
           dataContext={dataScope.transform(transform)}

src/Widgets/DataColumnListWidget/DataColumnListWidgetComponent.tsx

@@ -3,11 +3,15 @@ import { DataColumnListWidget } from './DataColumnListWidgetClass'
 import { EditorNote } from '../../Components/EditorNote'
 import { Loading } from '../../Components/Loading'
 import { DataErrorEditorNote } from '../../Components/DataErrorEditorNote'
+import { useContext } from 'react'
+import { DataBatchContext } from '../../Components/DataBatchContext'
+import { CombinedLoader } from '../DataWidget/CombinedLoader'
 
 provideComponent(
   DataColumnListWidget,
   ({ widget }) => {
     const dataScope = useData()
+    const { combinedLoaderKey, hasMore } = useContext(DataBatchContext)
     let dataError: unknown
 
     try {
@@ -31,17 +35,24 @@ provideComponent(
     const columnsCount = widget.get('columnsCount') || '2'
 
     return (
-      <div className={`row row-cols-1 row-cols-md-${columnsCount}`}>
-        {dataItems.map((dataItem) => (
-          <ContentTag
-            content={widget}
-            attribute="content"
-            className="col"
-            dataContext={dataItem}
-            key={dataItem.id()}
-          />
-        ))}
-      </div>
+      <>
+        <div className={`row row-cols-1 row-cols-md-${columnsCount}`}>
+          {dataItems.map((dataItem) => (
+            <ContentTag
+              content={widget}
+              attribute="content"
+              className="col"
+              dataContext={dataItem}
+              key={dataItem.id()}
+            />
+          ))}
+        </div>
+        <CombinedLoader
+          dataScope={dataScope}
+          hasMore={hasMore}
+          key={combinedLoaderKey}
+        />
+      </>
     )
   },
   { loading: Loading },

src/Widgets/DataWidget/CombinedLoader.tsx

@@ -0,0 +1,19 @@
+import { connect, DataScope } from 'scrivito'
+import { Loading } from '../../Components/Loading'
+
+export const CombinedLoader = connect(
+  function CombinedLoader({
+    dataScope,
+    hasMore,
+  }: {
+    dataScope: DataScope
+    hasMore: () => boolean
+  }) {
+    // use side-effects to trigger loading
+    dataScope.take()
+    hasMore()
+
+    return null
+  },
+  { loading: Loading },
+)

src/Widgets/DataWidget/DataWidgetComponent.tsx

@@ -3,11 +3,15 @@ import { DataWidget } from './DataWidgetClass'
 import { EditorNote } from '../../Components/EditorNote'
 import { Loading } from '../../Components/Loading'
 import { DataErrorEditorNote } from '../../Components/DataErrorEditorNote'
+import { DataBatchContext } from '../../Components/DataBatchContext'
+import { useContext } from 'react'
+import { CombinedLoader } from './CombinedLoader'
 
 provideComponent(
   DataWidget,
   ({ widget }) => {
     const dataScope = useData()
+    const { combinedLoaderKey, hasMore } = useContext(DataBatchContext)
     let dataError: unknown
 
     try {
@@ -37,6 +41,11 @@ provideComponent(
             key={dataItem.id()}
           />
         ))}
+        <CombinedLoader
+          dataScope={dataScope}
+          hasMore={hasMore}
+          key={combinedLoaderKey}
+        />
       </>
     )
   },