Update documentation

Author: djhi

docs/List.md

@@ -1190,12 +1190,27 @@ export const PostList = () => (
             }
         }}
     >
-        {/* DataGrid */}
+        <WithListContext
+            render={context =>
+                context.filterValues.q == null ||
+                context.filterValues.q === '' ? (
+                    <CardContentInner>
+                        Type a search term to fetch data
+                    </CardContentInner>
+                ) : (
+                    <Datagrid>
+                        {/* your fields */}
+                    </Datagrid>
+                )
+            }
+        />
     </List>
 )
 ```
 {% endraw %}
 
+**Note**: Notice we display some custom UI when there is no filter. This is because otherwise, users would see the loading UI as Tanstack Query will set the `isPending` property of the underlying query to `true` if the query isn't enabled. 
+
 ## Accessing Extra Response Data
 
 If `dataProvider.getList()` returns additional metadata in the response under the `meta` key, you can access it in the list view using the `meta` property of the `ListContext`.

packages/ra-ui-materialui/src/list/List.stories.tsx

@@ -7,6 +7,7 @@ import {
     TestMemoryRouter,
     DataProvider,
     GetListParams,
+    WithListContext,
 } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import {
@@ -253,28 +254,25 @@ export const ConditionalDataFetching = () => (
                             },
                         }}
                     >
-                        <ConditionalDataFetchingView />
+                        <WithListContext
+                            render={context =>
+                                context.filterValues.q == null ||
+                                context.filterValues.q === '' ? (
+                                    <CardContentInner>
+                                        Type a search term to fetch data
+                                    </CardContentInner>
+                                ) : (
+                                    <BookList />
+                                )
+                            }
+                        />
                     </List>
                 )}
             />
         </Admin>
     </TestMemoryRouter>
 );
 
-const ConditionalDataFetchingView = () => {
-    const context = useListContext();
-
-    if (context.filterValues.q == null || context.filterValues.q === '') {
-        return (
-            <CardContentInner>
-                Type a search term to fetch data
-            </CardContentInner>
-        );
-    }
-
-    return <BookList />;
-};
-
 export const Filter = () => (
     <TestMemoryRouter initialEntries={['/books']}>
         <Admin dataProvider={defaultDataProvider}>