title: How to filter a list in react-admin with a parameter that is fetched asynchronously?
body: <p>I am trying to filter a list in react-admin.</p>
  <p>Basically, I have a list of classes, that I want to filter by teacherId. However, the teacherId has to be fetched asynchronously.</p>
  <p>The code looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>const activitiesFilters = [
    &lt;TextInput key=&quot;search&quot; source=&quot;q&quot; label=&quot;Search an Activity&quot; alwaysOn /&gt;,
  ]
  
  export const ActivityList = (props) =&gt; {
    const teacher = useCurrentTeacherProfile() // This is the asynchronous call
  
    return (
      &lt;List
        filters={activitiesFilters}
        filter={{ authorId: teacher?.id }} // Here I am using the teacher ID to filter my list
        {...props}
        exporter={false}
      &gt;
        &lt;Datagrid rowClick=&quot;edit&quot;&gt;
          &lt;TextField source=&quot;id&quot; /&gt;
          &lt;TextField source=&quot;title&quot; /&gt;
          &lt;TextField source=&quot;location&quot; /&gt;
          &lt;DateField source=&quot;dateTime&quot; /&gt;
        &lt;/Datagrid&gt;
      &lt;/List&gt;
    )
  }
  </code></pre>
  <p>The above code gives me this error:</p>
  <pre><code>Error: ActivityList suspended while rendering, but no fallback UI was specified. Add a &lt;Suspense fallback=...&gt; component higher in the tree to provide a loading indicator or placeholder to display.
  </code></pre>
  <p>I tried adding a <code>&lt;Suspense /&gt;</code> component above the <code>&lt;List /&gt;</code> but it doesn't work.</p>
  <p>And if I add the <code>&lt;Suspense /&gt;</code> component at the root, above the <code>&lt;Admin /&gt;</code> one, it breaks the navigation.</p>
  <p>Is there a way I can filter my list with a parameter that is fetched asynchronously?</p>
  <p>Thanks!</p>