[embeddable] cleanup usages of useBatchedOptionalPublishingSubjects (#216714)

`useBatchedOptionalPublishingSubjects` should only be used when `api` is
not available until after rendering. This PR replaces usages of
`useBatchedOptionalPublishingSubjects` with
`useBatchedPublishingSubjects` where possible.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

examples/embeddable_examples/public/app/render_examples.tsx

@@ -22,51 +22,80 @@ import {
 } from '@elastic/eui';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { TimeRange } from '@kbn/es-query';
-import { useBatchedOptionalPublishingSubjects } from '@kbn/presentation-publishing';
+import { PublishesDataLoading, useStateFromPublishingSubject } from '@kbn/presentation-publishing';
 import { SearchEmbeddableRenderer } from '../react_embeddables/search/search_embeddable_renderer';
 import { SEARCH_EMBEDDABLE_TYPE } from '../react_embeddables/search/constants';
 import type { SearchApi, SearchSerializedState } from '../react_embeddables/search/types';
 
+function DatePicker({
+  dataLoading$,
+  onReload,
+  timeRange,
+  setTimeRange,
+}: {
+  dataLoading$: PublishesDataLoading['dataLoading$'];
+  timeRange: TimeRange;
+  setTimeRange: (timeRange: TimeRange) => void;
+  onReload: () => void;
+}) {
+  const dataLoading = useStateFromPublishingSubject(dataLoading$);
+  return (
+    <EuiSuperDatePicker
+      isLoading={dataLoading ?? false}
+      start={timeRange.from}
+      end={timeRange.to}
+      onTimeChange={({ start, end }: OnTimeChangeProps) => {
+        setTimeRange({
+          from: start,
+          to: end,
+        });
+      }}
+      onRefresh={() => {
+        onReload();
+      }}
+    />
+  );
+}
+
 export const RenderExamples = () => {
   const parentApi = useMemo(() => {
+    const timeRange$ = new BehaviorSubject<TimeRange>({
+      from: 'now-24h',
+      to: 'now',
+    });
+    const reload$ = new Subject<void>();
     return {
-      reload$: new Subject<void>(),
+      reload$,
+      onReload: () => {
+        reload$.next();
+      },
       getSerializedStateForChild: () => ({
         rawState: {
           timeRange: undefined,
         },
       }),
-      timeRange$: new BehaviorSubject<TimeRange>({
-        from: 'now-24h',
-        to: 'now',
-      }),
+      timeRange$,
+      setTimeRange: (timeRange: TimeRange | undefined) => {
+        if (timeRange) timeRange$.next(timeRange);
+      },
     };
     // only run onMount
   }, []);
 
   const [api, setApi] = useState<SearchApi | null>(null);
   const [hidePanelChrome, setHidePanelChrome] = useState<boolean>(false);
-  const [dataLoading, timeRange] = useBatchedOptionalPublishingSubjects(
-    api?.dataLoading$,
-    parentApi.timeRange$
-  );
+  const timeRange = useStateFromPublishingSubject(parentApi.timeRange$);
 
   return (
     <div>
-      <EuiSuperDatePicker
-        isLoading={dataLoading ? dataLoading : false}
-        start={timeRange.from}
-        end={timeRange.to}
-        onTimeChange={({ start, end }: OnTimeChangeProps) => {
-          parentApi.timeRange$.next({
-            from: start,
-            to: end,
-          });
-        }}
-        onRefresh={() => {
-          parentApi.reload$.next();
-        }}
-      />
+      {api && (
+        <DatePicker
+          dataLoading$={api.dataLoading$}
+          onReload={parentApi.onReload}
+          setTimeRange={parentApi.setTimeRange}
+          timeRange={timeRange}
+        />
+      )}
 
       <EuiSpacer size="s" />