Explore: Sync timepicker and logs after live-tailing stops (#20979)

public/app/features/explore/LiveTailButton.tsx

@@ -24,7 +24,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     liveButton: css`
       label: liveButton;
-      transition: background-color 1s, border-color 1s, color 1s;
       margin: 0;
     `,
     isLive: css`
@@ -84,7 +83,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       label: stopButtonEnterActive;
       opacity: 1;
       width: 32px;
-      transition: opacity 500ms ease-in 50ms, width 500ms ease-in 50ms;
     `,
     stopButtonExit: css`
       label: stopButtonExit;
@@ -96,7 +94,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       label: stopButtonExitActive;
       opacity: 0;
       width: 0;
-      transition: opacity 500ms ease-in 50ms, width 500ms ease-in 50ms;
     `,
   };
 });

public/app/features/explore/useLiveTailControls.ts

 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { changeRefreshInterval } from './state/actions';
+import { changeRefreshInterval, runQueries } from './state/actions';
 import { setPausedStateAction } from './state/actionTypes';
 import { RefreshPicker } from '@grafana/ui';
 import { ExploreId } from '../../types';
@@ -29,6 +29,7 @@ export function useLiveTailControls(exploreId: ExploreId) {
     // TODO referencing this from perspective of refresh picker when there is designated button for it now is not
     //  great. Needs a bit of refactoring.
     dispatch(changeRefreshInterval(exploreId, RefreshPicker.offOption.value));
+    dispatch(runQueries(exploreId));
   }, [exploreId, dispatch, pause]);
 
   const start = useCallback(() => {