diff --git a/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx
index 564854937b..0218a83c3c 100644
--- a/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx
+++ b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx
@@ -9,6 +9,7 @@ import 'ace-builds/src-noconflict/theme-github';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
+import debounce from '../../util/debounce';
 
 const LINE_HEIGHT = 24;
 const PADDING = 12;
@@ -125,7 +126,7 @@ function CodeEditor({
           mode={aceModes[mode] || 'text'}
           className={`pf-c-form-control ${className}`}
           theme="github"
-          onChange={onChange}
+          onChange={debounce(onChange, 250)}
           value={value}
           name={id || 'code-editor'}
           editorProps={{ $blockScrolling: true }}
diff --git a/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx
index 6f834d9108..69f498d2e3 100644
--- a/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx
+++ b/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import CodeEditor from './CodeEditor';
+import debounce from '../../util/debounce';
+
+jest.mock('../../util/debounce');
 
 describe('CodeEditor', () => {
   beforeEach(() => {
@@ -19,6 +22,7 @@ describe('CodeEditor', () => {
   });
 
   it('should trigger onChange prop', () => {
+    debounce.mockImplementation(fn => fn);
     const onChange = jest.fn();
     const wrapper = mountWithContexts(
       <CodeEditor value="---" onChange={onChange} mode="yaml" />