@tellescope/react-components 1.224.0 → 1.225.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.224.0",
+  "version": "1.225.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.224.0",
-    "@tellescope/sdk": "^1.224.0",
-    "@tellescope/types-client": "^1.224.0",
-    "@tellescope/types-models": "^1.224.0",
-    "@tellescope/types-utilities": "^1.224.0",
-    "@tellescope/utilities": "^1.224.0",
-    "@tellescope/validation": "^1.224.0",
+    "@tellescope/constants": "^1.225.0",
+    "@tellescope/sdk": "^1.225.0",
+    "@tellescope/types-client": "^1.225.0",
+    "@tellescope/types-models": "^1.225.0",
+    "@tellescope/types-utilities": "^1.225.0",
+    "@tellescope/utilities": "^1.225.0",
+    "@tellescope/validation": "^1.225.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -83,7 +83,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "ed57eae72bced200381c5a7cf8703153886d2b4d",
+  "gitHead": "764982e316e8cf0dba3151e4d0ecf3741bc39725",
   "publishConfig": {
     "access": "public"
   }

package/src/CMS/ContentViewer.tsx

@@ -117,6 +117,28 @@ export const correct_youtube_link_for_embed = (link: string) => {
   return link.replace('/watch?v=', '/embed/').split('&')[0]
 }
 
+const blockStyleToCSS = (style?: any): React.CSSProperties => {
+  if (!style) return {}
+
+  const cssStyle: React.CSSProperties = {}
+
+  if (style.width) cssStyle.width = `${style.width}px`
+  if (style.height) cssStyle.height = `${style.height}px`
+  if (style.backgroundColor) cssStyle.backgroundColor = style.backgroundColor
+  if (style.textColor) cssStyle.color = style.textColor
+  if (style.borderColor || style.borderWidth) {
+    cssStyle.border = `${style.borderWidth || 1}px solid ${style.borderColor || '#cccccc'}`
+  }
+
+  // Add default styling when any box style is applied
+  if (Object.keys(cssStyle).length > 0) {
+    cssStyle.padding = cssStyle.padding || '10px'
+    cssStyle.display = cssStyle.display || 'inline-block'
+  }
+
+  return cssStyle
+}
+
 export const ArticleViewer = ({ 
   article,
   width,
@@ -186,13 +208,17 @@ export const ArticleViewer = ({
         <Grid item key={i}>
           {
             block.type === 'h1' ? (
-              <Typography component="h1" sx={{ fontSize: 28, fontWeight: 'bold', m: 0, p: 0 }}>{block.info.text}</Typography>
+              <Typography component="h1" sx={{ fontSize: 28, fontWeight: 'bold', m: 0, p: 0 }} style={blockStyleToCSS(block.style)}>{block.info.text}</Typography>
             )
           : block.type === 'h2' ? (
-              <Typography component="h2" sx={{ fontSize: 23, m: 0, p: 0 }}>{block.info.text}</Typography>
+              <Typography component="h2" sx={{ fontSize: 23, m: 0, p: 0 }} style={blockStyleToCSS(block.style)}>{block.info.text}</Typography>
             )
           : block.type === 'html' ? (
-            <div style={{ fontSize: 18, lineHeight: '25pt' }} 
+            <div style={{
+              fontSize: 18,
+              lineHeight: '25pt',
+              ...blockStyleToCSS(block.style)
+            }}
               className={css`p {
                 margin-top: 0;
                 margin-bottom: 0;
@@ -201,15 +227,16 @@ export const ArticleViewer = ({
                 __html: remove_script_tags(
                   block.info.html.replaceAll(/style="*"/g, '')
                 )
-              }} 
+              }}
             />
             ) 
           : block.type === 'image' ? (
-              <img src={block.info.link} alt={''} style={{ 
-                maxWidth: block.info.maxWidth || '100%', 
+              <img src={block.info.link} alt={block.info.alt || ''} style={{
+                maxWidth: block.info.maxWidth || '100%',
                 maxHeight: block.info.maxHeight || undefined, // '' => undefined
                 height: block.info.height || undefined, // '' => undefined
                 width: block.info.width || undefined, // '' => undefined
+                ...blockStyleToCSS(block.style)
               }} />
             )
           : block.type === 'youtube' ? (
@@ -254,12 +281,13 @@ export const ArticleViewer = ({
   )
 }
 
+
 export const html_for_article = (article: ManagedContentRecord, options?: { rootWidth?: number }) => {
   const rootWidth = options?.rootWidth || 400
   
   const content = (
     (article.blocks ?? [])
-    .map((block, i) => 
+    .map((block, i) =>
         block.type === 'h1' ? (
           `<h1>${block.info.text}</h1>`
         )
@@ -268,11 +296,11 @@ export const html_for_article = (article: ManagedContentRecord, options?: { root
         )
       : block.type === 'html' ? (
         `<div>${remove_script_tags(remove_script_tags(block.info.html))}</div>`
-        ) 
+        )
       : block.type === 'image' ? (
-          // wrap with div to supporting centering later 
+          // wrap with div to supporting centering later
           `<div style="">
-            <img src="${block.info.link}" alt={''} style="max-width: ${block.info.maxWidth || '100%'}; max-height: ${block.info.maxHeight || undefined}; height: ${block.info.height || undefined}; width: ${block.info.width || undefined};" />
+            <img src="${block.info.link}" alt="${block.info.alt || ''}" style="max-width: ${block.info.maxWidth || '100%'}; max-height: ${block.info.maxHeight || undefined}; height: ${block.info.height || undefined}; width: ${block.info.width || undefined};" />
           </div>`
         )
       : block.type === 'youtube' ? (

package/src/Forms/form_responses.tsx

@@ -23,8 +23,8 @@ export const AddressDisplay = ({ value } : { value: Required<FormResponseAnswerA
   </Grid>
 ) 
 
-export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, printing, onImageClick } : { 
-  answer: FormResponseValueAnswer, 
+export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, printing, onImageClick } : {
+  answer: FormResponseValueAnswer,
   formResponse: FormResponse,
   fieldId: string,
   printing?: boolean,
@@ -57,9 +57,9 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
             )}
           </ol>
       : a.type === 'file'
-        ? a.value.secureName 
+        ? a.value.secureName
           ? <Typography>
-              {!printing 
+              {!printing
                 ? <DownloadFileIconButton secureName={a.value.secureName} onDownload={url => window.open(url, '_blank')} />
                 : (
                   <SecureImage secureName={a.value.secureName} onImageClick={onImageClick}
@@ -74,10 +74,10 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
       : a.type === 'files'
         ? a.value.map(file => (
           <Typography key={file.secureName}>
-            {!printing 
+            {!printing
               ? <DownloadFileIconButton secureName={file.secureName} onDownload={url => window.open(url, '_blank')} />
               : (
-                <SecureImage secureName={file.secureName} 
+                <SecureImage secureName={file.secureName}
                   style={{ maxHeight: 400, maxWidth: 400 }}
                 />
               )
@@ -308,14 +308,14 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
 
       <div style={{ flexDirection: "column", display: 'flex', flex: 1 }}>
       {response.responses.map((r, i) => (
-          <div key={i} style={{ marginBottom: 12 }}>
+          <div key={i} style={{ marginBottom: 36 }}>
             <div style={{ display: 'flex', flex: 1, flexDirection: "row", justifyContent: 'space-between', flexWrap: 'nowrap' }}>
-              {r.fieldTitle && 
+              {r.fieldTitle &&
                 <div style={{ }}>
                   <Typography style={{
                     fontWeight: 'bold',
                     width: (
-                      showAnswerInline 
+                      showAnswerInline
                         ? '400px'
                         : undefined
                     )
@@ -326,10 +326,10 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
               }
 
               <div style={{ }}>
-                {showAnswerInline && r.answer.type !== 'Question Group' 
+                {showAnswerInline && r.answer.type !== 'Question Group'
                 && !(typeof r.answer.value === 'string' && r.answer.value.includes('{TELLESCOPE')) // hidden field for matching, not to display
                 && (
-                  (r.answerIsHTML && typeof r.answer.value === 'string') 
+                  (r.answerIsHTML && typeof r.answer.value === 'string')
                     ? <div dangerouslySetInnerHTML={{ __html: remove_script_tags(r.answer.value) }} />
                     : <ResponseAnswer fieldId={r.fieldId} formResponse={response} answer={r.answer} printing={printing} />
                 )
@@ -339,7 +339,7 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
 
             {r.fieldDescription
               ? (
-                <Typography style={{  }}>
+                <Typography style={{ }}>
                   {r.fieldDescription}
                 </Typography>
               ): r.fieldHtmlDescription
@@ -349,10 +349,12 @@ export const FormResponseView = ({ showAnswerInline=true, logoURL, enduser, onCl
                   }} />
                 )
                 : null
-            } 
+            }
 
             {!showAnswerInline &&
-              <ResponseAnswer answer={r.answer} formResponse={response} fieldId={r.fieldId} />
+              <div style={{ }}>
+                <ResponseAnswer answer={r.answer} formResponse={response} fieldId={r.fieldId} />
+              </div>
             }
           </div>
         )

package/src/Forms/forms.tsx

@@ -6,7 +6,7 @@ import { AddToDatabaseProps, AddressInput, AllergiesInput, AppointmentBookingInp
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
-import { field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
+import { calculate_form_scoring, field_can_autosubmit, form_response_value_to_string, formatted_date, object_is_empty, objects_equivalent, read_local_storage, remove_script_tags, responses_satisfy_conditions, truncate_string } from "@tellescope/utilities"
 import { Divider } from "@mui/material"
 
 export const TellescopeFormContainer = ({ businessId, organizationIds, ...props } : { 
@@ -315,7 +315,7 @@ export const QuestionForField = ({
           <AppointmentBooking formResponseId={formResponseId} enduserId={enduserId} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} responses={responses} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Appointment Booking'>} form={form} />
         )
         : field.type === 'Stripe' ? (
-          <Stripe field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} />
+          <Stripe enduserId={enduserId} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} setCustomerId={setCustomerId} form={form} />
         )
         : field.type === 'Chargebee' ? (
           <Chargebee field={field} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<'Chargebee'>} setCustomerId={setCustomerId} form={form} />
@@ -574,6 +574,16 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
 
   const numRemainingPages = getNumberOfRemainingPages()
 
+  // Calculate current score if real-time scoring is enabled
+  const currentScores = useMemo(() => {
+    if (!form?.realTimeScoring || !form.scoring?.length) return null
+
+    return calculate_form_scoring({
+      response: { responses },
+      form: { scoring: form.scoring }
+    })
+  }, [form?.realTimeScoring, form?.scoring, responses])
+
   if (!(currentValue && currentFileValue)) return <></>
   return (
     submitted 
@@ -590,7 +600,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
                 handleDatabaseSelect={handleDatabaseSelect}
                 setCustomerId={setCustomerId}
                 repeats={repeats} onRepeatsChange={setRepeats}
-                value={currentValue} file={currentFileValue} 
+                value={currentValue} file={currentFileValue}
                 customInputs={customInputs}
                 onAddFile={onAddFile} onFieldChange={onFieldChange}
                 responses={responses} selectedFiles={selectedFiles}
@@ -658,14 +668,49 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
           }
         </Flex>
 
-        {!customization?.hideProgressBar && 
-          <Progress 
-            numerator={currentPageIndex + (validateCurrentField() ? 0 : 1)} 
-            denominator={currentPageIndex + 1 + numRemainingPages}  
+        {!customization?.hideProgressBar &&
+          <Progress
+            numerator={currentPageIndex + (validateCurrentField() ? 0 : 1)}
+            denominator={currentPageIndex + 1 + numRemainingPages}
             style={{ marginTop: '15px' }}
           />
         }
 
+        {/* Real-time scoring display */}
+        {currentScores && currentScores.length > 0 && (
+          <Flex style={{ marginTop: 10, marginBottom: 5, width: '100%' }}>
+            {currentScores.map((score, index) => (
+              <Flex key={index} style={{
+                padding: '10px 14px',
+                backgroundColor: '#f8f9fa',
+                borderRadius: 8,
+                border: `1px solid ${theme?.themeColor || PRIMARY_HEX}20`,
+                marginRight: index < currentScores.length - 1 ? 12 : 0,
+                minWidth: 120,
+                flexDirection: 'column',
+                alignItems: 'center'
+              }}>
+                <Typography style={{
+                  fontSize: 12,
+                  fontWeight: 'medium',
+                  textAlign: 'center',
+                  lineHeight: 1.2,
+                  marginBottom: 4
+                }}>
+                  {score.title}
+                </Typography>
+                <Typography style={{
+                  fontWeight: 'bold',
+                  color: theme?.themeColor || PRIMARY_HEX,
+                  fontSize: 18
+                }}>
+                  {score.value}
+                </Typography>
+              </Flex>
+            ))}
+          </Flex>
+        )}
+
         <Typography color="error" style={{ alignText: 'center', marginTop: 3 }}>
           {submitErrorMessage}
         </Typography>

package/src/Forms/hooks.tsx

@@ -364,6 +364,9 @@ interface UseTellescopeFormOptions {
   enduser?: Partial<Enduser>,
   isPublicForm?: boolean,
   dontAutoadvance?: boolean,
+  groupId?: string,
+  groupInstance?: string,
+  groupPosition?: number,
 }
 
 const OrganizationThemeContext = createContext(null as any as { 
@@ -512,7 +515,7 @@ const shouldCallout = (field: FormField | undefined, value: FormResponseValueAns
 
 export type Response = FormResponseValue & { touched: boolean, includeInSubmit: boolean, field: FormField }
 export type FileResponse = { fieldId: string, fieldTitle: string, blobs?: FileBlob[] }
-export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogicValue, customization, carePlanId, calendarEventId, context, ga4measurementId, rootResponseId, parentResponseId, accessCode, existingResponses, automationStepId, enduserId, formResponseId, fields, isInternalNote, formTitle, submitRedirectURL,enduser }: UseTellescopeFormOptions) => {
+export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogicValue, customization, carePlanId, calendarEventId, context, ga4measurementId, rootResponseId, parentResponseId, accessCode, existingResponses, automationStepId, enduserId, formResponseId, fields, isInternalNote, formTitle, submitRedirectURL, enduser, groupId, groupInstance, groupPosition }: UseTellescopeFormOptions) => {
   const { amPm, hoursAmPm, minutes } = get_time_values(new Date())
 
   const root = useTreeForFormFields(fields)
@@ -1139,6 +1142,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
 
   const handleFileUpload = useCallback(async (blob: FileBlob, fieldId: string) => {
     const responseIndex = responses.findIndex(f => f.fieldId === fieldId)
+    const field = fields.find(f => f.id === fieldId)
     const result: FormResponseAnswerFileValue = { name: blob.name, secureName: '' }
     const { secureName } = await handleUpload(
       {
@@ -1146,7 +1150,8 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         size: blob.size,
         type: blob.type,
         enduserId,
-      }, 
+        hiddenFromEnduser: field?.options?.hideFromPortal,
+      },
       blob
     )
 
@@ -1160,7 +1165,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     } else {
       responses[responseIndex].answer.value = { ...result, type: blob.type, secureName, name: result.name ?? '' } 
     }
-  }, [responses, handleUpload])
+  }, [responses, handleUpload, fields])
 
   const submit = useCallback(async (options?: { onPreRedirect?: () => void, onFileUploadsDone?: () => void, onSuccess?: (r: FormResponse) => void, includedFieldIds?: string[], otherEnduserIds?: string[], onBulkErrors?: (errors: { enduserId: string, message: string }[]) => void }) => {
     setSubmitErrorMessage('')
@@ -1230,13 +1235,16 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
             accessCode : (
               accessCode 
               || (await (
-                session as any as Session).api.form_responses.prepare_form_response({ 
+                session as any as Session).api.form_responses.prepare_form_response({
                   formId, enduserId: eId, isInternalNote, title: formTitle,
                   parentResponseId, rootResponseId,
-    
-                  carePlanId, 
+
+                  carePlanId,
                   context,
                   calendarEventId,
+                  groupId,
+                  groupInstance,
+                  groupPosition,
                 })
               ).accessCode
             ),

package/src/Forms/inputs.tsx

@@ -1605,7 +1605,7 @@ export const MultipleChoiceInput = ({ field, form, value: _value, onChange }: Fo
   )
 }
 
-export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInputProps<'Stripe'> & { 
+export const StripeInput = ({ field, value, onChange, setCustomerId, enduserId }: FormInputProps<'Stripe'> & {
   setCustomerId: React.Dispatch<React.SetStateAction<string | undefined>>,
 }) => {
   const session = useResolvedSession()
@@ -1625,7 +1625,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     }
     fetchRef.current = true
 
-    session.api.form_responses.stripe_details({ fieldId: field.id })
+    session.api.form_responses.stripe_details({ fieldId: field.id, enduserId })
     .then(({ clientSecret, publishableKey, stripeAccount, businessName, customerId, isCheckout, answerText }) => {
       setAnswertext(answerText || '')
       setIsCheckout(!!isCheckout)
@@ -1640,7 +1640,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
         setError(e.message)
       }
     })
-  }, [session, value, field.id])
+  }, [session, value, field.id, enduserId])
 
   const cost = (
     (field.options?.productIds || []).map(id => findProduct(id, { batch: false })) // seems to be having issues with bulk read

package/src/state.tsx

@@ -887,32 +887,29 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
     // prevent frequent refetches 
     if (value && options?.reload && didFetch('findById' + modelName + id, true)) return value
 
-    if (options?.reload || (value === undefined && !didFetch('findById' + modelName + id))) {
-      setFetched('findById' + modelName + id, true) // prevent multiple API calls
-
-      if (options?.batch) {
-        // ensure duplicate ids are not provided
-        if (!batchRef.current.nextBatch.includes(id.toString()) && !batchRef.current.ids.includes(id.toString())) {
-          if (batchRef.current.fetching) {
-            batchRef.current.nextBatch.push(id.toString()) // fetch in next batch if currently fetching
-          } else {
-            batchRef.current.ids.push(id.toString())
-          }
+    // Handle batch requests separately - always allow queueing for batch
+    if (options?.batch) {
+      if (!batchRef.current.nextBatch.includes(id.toString()) && !batchRef.current.ids.includes(id.toString())) {
+        if (batchRef.current.fetching) {
+          batchRef.current.nextBatch.push(id.toString()) // fetch in next batch if currently fetching
+        } else {
+          batchRef.current.ids.push(id.toString())
         }
-      } else {
-        findOne?.(id.toString())
-        .then(found => {
-          // prevent unnecessary re-renders by calling addLocalElement, when the exact value already exists
-          const existingUnchanged = value_is_loaded(state) && state.value.find(v => v.id === id && objects_equivalent(v, found))
-          if (existingUnchanged) return
-
-          addLocalElement(found, { replaceIfMatch: true })
-        })
-        .catch(e => {
-          setFetched('recordNotFound' + modelName + id, true) // mark record not found for id
-          console.error(e) 
-        })
       }
+    } else if (options?.reload || (value === undefined && !didFetch('findById' + modelName + id))) {
+      setFetched('findById' + modelName + id, true) // prevent multiple API calls
+      findOne?.(id.toString())
+      .then(found => {
+        // prevent unnecessary re-renders by calling addLocalElement, when the exact value already exists
+        const existingUnchanged = value_is_loaded(state) && state.value.find(v => v.id === id && objects_equivalent(v, found))
+        if (existingUnchanged) return
+
+        addLocalElement(found, { replaceIfMatch: true })
+      })
+      .catch(e => {
+        setFetched('recordNotFound' + modelName + id, true) // mark record not found for id
+        console.error(e)
+      })
     }
 
     return value
@@ -931,30 +928,61 @@ export const useListStateHook = <T extends { id: string | number }, ADD extends
       }
 
       batchRef.current.fetching = true
+      const currentBatchIds = batchRef.current.ids.slice(0, BULK_READ_DEFAULT_LIMIT)
+
+      // Filter out IDs that are already loaded to prevent unnecessary fetching
+      const idsToFetch = currentBatchIds.filter(id => {
+        const alreadyLoaded = state.status === LoadingStatus.Loaded &&
+          state.value.find(v => v.id.toString() === id.toString())
+        return !alreadyLoaded
+      })
+
+      // Only make API call if there are actually IDs to fetch
+      if (idsToFetch.length === 0) {
+        // Mark all IDs as processed even though they were already loaded
+        currentBatchIds.forEach(id => {
+          setFetched('findById' + modelName + id, true)
+        })
+
+        // Continue to next batch
+        batchRef.current.ids = batchRef.current.nextBatch
+        batchRef.current.nextBatch = []
+        batchRef.current.fetching = false
+        return
+      }
+
       findByIds({
-        ids: batchRef.current.ids.slice(0, BULK_READ_DEFAULT_LIMIT), // ensure limited to 1000 entries
+        ids: idsToFetch,
       })
       .then(({ matches }) => {
-        if (matches.length) { 
+        if (matches.length) {
           addLocalElements(matches, { replaceIfMatch: true })
-          options?.onBulkRead?.(matches) 
+          options?.onBulkRead?.(matches)
         }
+        // Mark all fetched IDs as complete (both successful and failed)
+        currentBatchIds.forEach(id => {
+          setFetched('findById' + modelName + id, true)
+        })
       })
       .catch(err => {
         console.error(err)
+        // Mark failed IDs as not found
+        currentBatchIds.forEach(id => {
+          setFetched('recordNotFound' + modelName + id, true)
+        })
       })
       .finally(() => {
         // ensure we make progress to prevent looping on an error
         batchRef.current.ids = batchRef.current.nextBatch
         batchRef.current.nextBatch = []
-        
+
         // allow next fetch
         batchRef.current.fetching = false
       })
     }, 333)
 
     return () => { clearInterval(i) }
-  }, [findByIds, addLocalElements, options?.onBulkRead])
+  }, [findByIds, addLocalElements, options?.onBulkRead, setFetched, modelName])
 
   const findByFilter: ListUpdateMethods<T, ADD>['findByFilter'] = useCallback((filter, options) => {
     const loadFilter = options?.loadFilter