Merge branch 'develop' into feat/widget-v2

app/javascript/widget/router.js

@@ -6,8 +6,9 @@ import Home from './views/Home.vue';
 import PreChatForm from './views/PreChatForm.vue';
 import Messages from './views/Messages.vue';
 import ArticleViewer from './views/ArticleViewer.vue';
+import store from './store';
 
-export default createRouter({
+const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
@@ -48,3 +49,35 @@ export default createRouter({
     },
   ],
 });
+
+/**
+ * Navigation Guards to Handle Route Transitions
+ *
+ * Purpose:
+ * Prevents duplicate form submissions and API calls during route transitions,
+ * especially important in high-latency scenarios.
+ *
+ * Flow:
+ * 1. beforeEach: Sets isUpdatingRoute to true at start of navigation
+ * 2. Component buttons/actions check this flag to prevent duplicate actions
+ * 3. afterEach: Resets the flag once navigation is complete
+ *
+ * Implementation note:
+ * Handling it globally, so that we can use it across all components
+ * to ensure consistent UI behavior during all route transitions.
+ *
+ * @see https://github.com/chatwoot/chatwoot/issues/10736
+ */
+
+router.beforeEach(async (to, from, next) => {
+  // Prevent any user interactions during route transition
+  await store.dispatch('appConfig/setRouteTransitionState', true);
+  next();
+});
+
+router.afterEach(() => {
+  // Re-enable user interactions after navigation is complete
+  store.dispatch('appConfig/setRouteTransitionState', false);
+});
+
+export default router;