use debounce on onchange

Author: yaoweiprc

packages/insomnia/src/ui/components/.client/codemirror/merge-editor.tsx

@@ -6,6 +6,7 @@ import type { MergeView } from 'codemirror/addon/merge/merge';
 import { DiffMatchPatch, DiffOp } from 'diff-match-patch-ts';
 import React, { useEffect, useRef } from 'react';
 
+import { debounce } from '~/common/misc';
 import { useIsLightTheme } from '~/ui/hooks/theme';
 
 // these global variables are required by codemirror merge addon
@@ -41,9 +42,9 @@ export const MergeEditor = ({ leftContent, rightContent, centerContent, onChange
   const isLightThemeRef = useRef(isLightTheme);
 
   useEffect(() => {
-    const onChange = (instance: CodeMirror.Editor) => {
+    const onChange = debounce((instance: CodeMirror.Editor) => {
       onChangeRef.current(instance.getDoc().getValue());
-    };
+    }, 300);
     if (!divRef.current) {
       return;
     }

packages/insomnia/src/ui/components/dropdowns/git-project-sync-dropdown.tsx

@@ -14,7 +14,6 @@ import {
 } from 'react-aria-components';
 import { useParams, useRevalidator } from 'react-router';
 import * as reactUse from 'react-use';
-import { parse, stringify } from 'yaml';
 
 import { useGitProjectCheckoutBranchActionFetcher } from '~/routes/git.branch.checkout';
 import { useGitProjectFetchActionFetcher } from '~/routes/git.fetch';
@@ -36,7 +35,6 @@ import { GitPullRequiredModal } from '../modals/git-pull-required-modal';
 import { GitProjectRepositorySettingsModal } from '../modals/git-repository-settings-modal';
 import { SyncMergeModal } from '../modals/sync-merge-modal';
 import { showToast } from '../toast-notification';
-import resultSample from './merge-result-sample.json';
 interface Props {
   gitRepository?: GitRepository;
 }
@@ -479,21 +477,6 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
 
   const pendingChangesCount = status?.localChanges ?? 0;
 
-  useEffect(() => {
-    for (const conflict of resultSample.conflicts) {
-      if (typeof conflict.mergeResult !== 'string') {
-        conflict.mergeResult = stringify(conflict.mergeResult);
-      }
-    }
-    showModal(SyncMergeModal, {
-      editorType: 'merge',
-      conflicts: resultSample.conflicts,
-      labels: resultSample.labels,
-      onResolveAll: (conflicts: MergeConflict[]) => {},
-      onCancelUnresolved: () => {},
-    });
-  }, []);
-
   return (
     <>
       {operationError && (