[CM] Fix flaky test in the example app (#153310)

## Summary

close https://github.com/elastic/kibana/issues/152852

🤞
https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2010

examples/content_management_examples/public/examples/todos/todos.tsx

@@ -6,7 +6,14 @@
  * Side Public License, v 1.
  */
 import React from 'react';
-import { EuiButtonGroup, EuiButtonIcon, EuiCheckbox, EuiFieldText, EuiSpacer } from '@elastic/eui';
+import {
+  EuiButtonGroup,
+  EuiButtonIcon,
+  EuiCheckbox,
+  EuiFieldText,
+  EuiSpacer,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
 import {
   useCreateContentMutation,
   useDeleteContentMutation,
@@ -55,7 +62,7 @@ const filters = [
 export const Todos = () => {
   const [filterIdSelected, setFilterIdSelected] = React.useState<TodoFilter>('all');
 
-  const { data, isLoading, isError, error } = useSearchTodosQuery({
+  const { data, isError, error, isFetching, isLoading } = useSearchTodosQuery({
     filter: filterIdSelected === 'all' ? undefined : filterIdSelected,
   });
 
@@ -63,7 +70,13 @@ export const Todos = () => {
   const deleteTodoMutation = useDeleteTodoMutation();
   const updateTodoMutation = useUpdateTodoMutation();
 
-  if (isLoading) return <p>Loading...</p>;
+  const isPending =
+    isFetching ||
+    isLoading ||
+    createTodoMutation.isLoading ||
+    deleteTodoMutation.isLoading ||
+    updateTodoMutation.isLoading;
+
   if (isError) return <p>Error: {error}</p>;
 
   return (
@@ -77,46 +90,50 @@ export const Todos = () => {
         }}
       />
       <EuiSpacer />
-      <ul>
+      {!isLoading && (
-        {data.hits.map((todo: Todo) => (
+        <ul>
-          <React.Fragment key={todo.id}>
+          {data.hits.map((todo: Todo) => (
-            <li
+            <React.Fragment key={todo.id}>
-              style={{ display: 'flex', alignItems: 'center' }}
+              <li
-              data-test-subj={`todoItem todoItem-${todo.id}`}
+                style={{ display: 'flex', alignItems: 'center' }}
-            >
+                data-test-subj={`todoItem todoItem-${todo.id}`}
-              <EuiCheckbox
+              >
-                id={todo.id + ''}
+                <EuiCheckbox
-                key={todo.id}
+                  id={todo.id + ''}
-                checked={todo.completed}
+                  key={todo.id}
-                onChange={(e) => {
+                  checked={todo.completed}
-                  updateTodoMutation.mutate({
+                  onChange={(e) => {
-                    contentTypeId: TODO_CONTENT_ID,
+                    updateTodoMutation.mutate({
-                    id: todo.id,
+                      contentTypeId: TODO_CONTENT_ID,
-                    data: {
+                      id: todo.id,
-                      completed: e.target.checked,
+                      data: {
-                    },
+                        completed: e.target.checked,
-                  });
+                      },
-                }}
+                    });
-                label={todo.title}
+                  }}
-                data-test-subj={`todoCheckbox todoCheckbox-${todo.id}`}
+                  label={todo.title}
-              />
+                  data-test-subj={`todoCheckbox todoCheckbox-${todo.id}`}
+                />
 
-              <EuiButtonIcon
+                <EuiButtonIcon
-                style={{ marginLeft: '8px' }}
+                  style={{ marginLeft: '8px' }}
-                display="base"
+                  display="base"
-                iconType="trash"
+                  iconType="trash"
-                aria-label="Delete"
+                  aria-label="Delete"
-                color="danger"
+                  color="danger"
-                onClick={() => {
+                  onClick={() => {
-                  deleteTodoMutation.mutate({ contentTypeId: TODO_CONTENT_ID, id: todo.id });
+                    deleteTodoMutation.mutate({ contentTypeId: TODO_CONTENT_ID, id: todo.id });
-                }}
+                  }}
-              />
+                />
-            </li>
+              </li>
-            <EuiSpacer size={'xs'} />
+              <EuiSpacer size={'xs'} />
-          </React.Fragment>
+            </React.Fragment>
-        ))}
+          ))}
-      </ul>
+        </ul>
-      <EuiSpacer />
+      )}
+      <div style={{ minHeight: 24 }}>
+        {isPending && <EuiLoadingSpinner data-test-subj={'todoPending'} />}
+      </div>
       <form
         onSubmit={(e) => {
           const inputRef = (e.target as HTMLFormElement).elements.namedItem(

test/examples/content_management/todo_app.ts

@@ -15,14 +15,13 @@ import { PluginFunctionalProviderContext } from '../../plugin_functional/service
 export default function ({ getService, getPageObjects }: PluginFunctionalProviderContext) {
   const testSubjects = getService('testSubjects');
   const find = getService('find');
-  const retry = getService('retry');
   const PageObjects = getPageObjects(['common']);
 
-  // FLAKY: https://github.com/elastic/kibana/issues/152852
+  describe('Todo app', () => {
-  describe.skip('Todo app', () => {
     it('Todo app works', async () => {
       const appId = 'contentManagementExamples';
       await PageObjects.common.navigateToApp(appId);
+      await testSubjects.missingOrFail(`todoPending`);
 
       // check that initial state is correct
       let todos = await testSubjects.findAll(`~todoItem`);
@@ -30,24 +29,26 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
       // check that filters work
       await (await find.byCssSelector('label[title="Completed"]')).click();
+      await testSubjects.missingOrFail(`todoPending`);
       todos = await testSubjects.findAll(`~todoItem`);
       expect(todos.length).to.be(1);
 
       await (await find.byCssSelector('label[title="Todo"]')).click();
+      await testSubjects.missingOrFail(`todoPending`);
       todos = await testSubjects.findAll(`~todoItem`);
       expect(todos.length).to.be(1);
 
       await (await find.byCssSelector('label[title="All"]')).click();
+      await testSubjects.missingOrFail(`todoPending`);
       todos = await testSubjects.findAll(`~todoItem`);
       expect(todos.length).to.be(2);
 
       // check that adding new todo works
       await testSubjects.setValue('newTodo', 'New todo');
       await (await testSubjects.find('newTodo')).pressKeys(Key.ENTER);
-      await retry.tryForTime(1000, async () => {
+      await testSubjects.missingOrFail(`todoPending`);
-        todos = await testSubjects.findAll(`~todoItem`);
+      todos = await testSubjects.findAll(`~todoItem`);
-        expect(todos.length).to.be(3);
+      expect(todos.length).to.be(3);
-      });
 
       // check that updating todo works
       let newTodo = todos[2];
@@ -55,8 +56,10 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
       let newTodoCheckbox = await newTodo.findByTestSubject('~todoCheckbox');
       expect(await newTodoCheckbox.isSelected()).to.be(false);
       await (await newTodo.findByTagName('label')).click();
+      await testSubjects.missingOrFail(`todoPending`);
 
       await (await find.byCssSelector('label[title="Completed"]')).click();
+      await testSubjects.missingOrFail(`todoPending`);
       todos = await testSubjects.findAll(`~todoItem`);
       expect(todos.length).to.be(2);
       newTodo = todos[1];
@@ -66,6 +69,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
       // check that deleting todo works
       await (await newTodo.findByCssSelector('[aria-label="Delete"]')).click();
+      await testSubjects.missingOrFail(`todoPending`);
       todos = await testSubjects.findAll(`~todoItem`);
       expect(todos.length).to.be(1);
     });