diff --git a/src/plugins/dashboard/public/application/utils/create_dashboard_app_state.tsx b/src/plugins/dashboard/public/application/utils/create_dashboard_app_state.tsx
index fb3614891729..b6b5d9873a76 100644
--- a/src/plugins/dashboard/public/application/utils/create_dashboard_app_state.tsx
+++ b/src/plugins/dashboard/public/application/utils/create_dashboard_app_state.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { debounceTime } from 'rxjs/operators';
 import { migrateAppState } from '../lib/migrate_app_state';
 import {
   IOsdUrlStateStorage,
@@ -21,6 +22,7 @@ import { syncQueryStateWithUrl } from '../../../../data/public';
 import { SavedObjectDashboard } from '../../saved_dashboards';
 
 const APP_STATE_STORAGE_KEY = '_a';
+const APP_STATE_ON_CHANGE_DEBOUNCE_MS = 5;
 
 interface Arguments {
   osdUrlStateStorage: IOsdUrlStateStorage;
@@ -118,6 +120,9 @@ export const createDashboardGlobalAndAppState = ({
     stateStorage: osdUrlStateStorage,
   });
 
+  // creates observable that debounces to prevent url state async updates
+  const onStateChange$ = stateContainer.state$.pipe(debounceTime(APP_STATE_ON_CHANGE_DEBOUNCE_MS));
+
   // starts syncing `_g` portion of url with query services
   // it is important to start this syncing after we set the time filter if timeRestore = true
   // otherwise it will case redundant browser history records and browser navigation like going back will not work correctly
@@ -129,7 +134,7 @@ export const createDashboardGlobalAndAppState = ({
   updateStateUrl({ osdUrlStateStorage, state: initialState, replace: true });
   // start syncing the appState with the ('_a') url
   startStateSync();
-  return { stateContainer, stopStateSync, stopSyncingQueryServiceStateWithUrl };
+  return { stateContainer, onStateChange$, stopStateSync, stopSyncingQueryServiceStateWithUrl };
 };
 
 /**
diff --git a/src/plugins/dashboard/public/application/utils/use/use_dashboard_app_state.tsx b/src/plugins/dashboard/public/application/utils/use/use_dashboard_app_state.tsx
index d5af39cca4fd..70679448a62b 100644
--- a/src/plugins/dashboard/public/application/utils/use/use_dashboard_app_state.tsx
+++ b/src/plugins/dashboard/public/application/utils/use/use_dashboard_app_state.tsx
@@ -64,6 +64,7 @@ export const useDashboardAppAndGlobalState = ({
 
       const {
         stateContainer,
+        onStateChange$,
         stopStateSync,
         stopSyncingQueryServiceStateWithUrl,
       } = createDashboardGlobalAndAppState({
@@ -162,7 +163,7 @@ export const useDashboardAppAndGlobalState = ({
 
         // If app state is changes, then set unsaved changes to true
         // the only thing app state is not tracking is the time filter, need to check the previous dashboard if they count time filter change or not
-        const stopSyncingFromAppState = stateContainer.subscribe((appStateData) => {
+        const stopSyncingFromAppState = onStateChange$.subscribe((appStateData) => {
           refreshDashboardContainer({
             dashboardContainer,
             dashboardServices: services,