diff --git a/app/components/workflow-basics/index.hbs b/app/components/workflow-basics/index.hbs
index b4a367a3..1de3bc6f 100644
--- a/app/components/workflow-basics/index.hbs
+++ b/app/components/workflow-basics/index.hbs
@@ -192,15 +192,14 @@
 <button class="btn btn-outline-danger ml-2" {{action "cancel"}}>
   Cancel
 </button>
-{{#if this.inFlight}}
-  <button class="btn btn-primary pull-right next" disabled>
-    Next
-  </button>
-{{else}}
-  <button class="btn btn-primary pull-right next" data-test-workflow-basics-next {{action @next}}>
-    Next
-  </button>
-{{/if}}
+<button
+  class="btn btn-primary pull-right next"
+  data-test-workflow-basics-next
+  {{on "click" (perform this.loadNext)}}
+  disabled={{this.loadNext.isRunning}}
+>
+  Next
+</button>
 {{#if this.isShowingUserSearchModal}}
   <div class="user-search-modal">
     <ModalDialog
diff --git a/app/components/workflow-basics/index.js b/app/components/workflow-basics/index.js
index ad630f5c..be05b574 100644
--- a/app/components/workflow-basics/index.js
+++ b/app/components/workflow-basics/index.js
@@ -5,9 +5,9 @@ import { action, get, set } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { A } from '@ember/array';
+import { task, timeout } from 'ember-concurrency';
+import { scheduleOnce } from '@ember/runloop';
 import { dropTask } from 'ember-concurrency-decorators';
-import { timeout } from 'ember-concurrency';
-import { run, scheduleOnce } from '@ember/runloop';
 
 const DEBOUNCE_MS = 250;
 
@@ -76,6 +76,11 @@ export default class WorkflowBasics extends Component {
     set(this.submission, 'preparers', []);
   }
 
+  loadNext = task({ drop: true }, async () => {
+    await timeout(100);
+    await this.args.validateAndLoadTab('submissions.new.grants');
+  });
+
   @action
   setupSubmission() {
     if (!this.isProxySubmission) {
diff --git a/app/controllers/submissions/new/basics.js b/app/controllers/submissions/new/basics.js
index ea2f5743..57f3a648 100644
--- a/app/controllers/submissions/new/basics.js
+++ b/app/controllers/submissions/new/basics.js
@@ -5,6 +5,7 @@ import { action, computed, get, set } from '@ember/object';
 import { A } from '@ember/array';
 import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency-decorators';
 
 export default class SubmissionsNewBasics extends Controller {
   @service workflow;
@@ -58,11 +59,6 @@ export default class SubmissionsNewBasics extends Controller {
     return !get(this, 'submission.submitter.id') && (!email || !emailPattern.test(email));
   }
 
-  @action
-  loadNext() {
-    this.validateAndLoadTab('submissions.new.grants');
-  }
-
   @action
   async loadTab(gotoRoute) {
     this.doiInfo.title = this.publication.title;
diff --git a/app/templates/submissions/new/basics.hbs b/app/templates/submissions/new/basics.hbs
index 7b164088..dcdba4a0 100644
--- a/app/templates/submissions/new/basics.hbs
+++ b/app/templates/submissions/new/basics.hbs
@@ -18,7 +18,7 @@
     @validateSubmitterEmail={{action "validateSubmitterEmail"}}
     @updatePublication={{action "updatePublication"}}
     @updateDoiInfo={{action "updateDoiInfo"}}
-    @next={{action "loadNext"}}
+    @validateAndLoadTab={{this.validateAndLoadTab}}
     @abort={{action "abort"}}
   />
 </WorkflowWrapper>
\ No newline at end of file
diff --git a/tests/integration/components/workflow-basics-test.js b/tests/integration/components/workflow-basics-test.js
index 296c81ac..58c11f48 100644
--- a/tests/integration/components/workflow-basics-test.js
+++ b/tests/integration/components/workflow-basics-test.js
@@ -5,9 +5,10 @@ import EmberObject, { get } from '@ember/object';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { module, test } from 'qunit';
-import { fillIn, render, settled, triggerKeyEvent } from '@ember/test-helpers';
+import { doubleClick, fillIn, render, settled, triggerKeyEvent } from '@ember/test-helpers';
 import { run } from '@ember/runloop';
 import { task } from 'ember-concurrency';
+import sinon from 'sinon';
 
 module('Integration | Component | workflow basics', (hooks) => {
   setupRenderingTest(hooks);
@@ -371,4 +372,32 @@ module('Integration | Component | workflow basics', (hooks) => {
 
     assert.deepEqual(get(this, 'doiInfo'), {}, 'doiInfo should be empty');
   });
+
+  test('loadNext is called once when next is clicked', async function (assert) {
+    this.publication.title = 'Moo title';
+    this.publication.journal = EmberObject.create({ journalName: 'Moo Journal' });
+
+    this.submission.publication = this.publication;
+
+    this.loadNext = sinon.stub();
+
+    await render(hbs`
+      <WorkflowBasics
+        @submission={{this.submission}}
+        @publication={{this.publication}}
+        @preLoadedGrant={{this.preLoadedGrant}}
+        @doiInfo={{this.doiInfo}}
+        @flaggedFields={{this.flaggedFields}}
+        @validateTitle={{this.validateTitle}}
+        @validateJournal={{this.validateJournal}}
+        @validateSubmitterEmail={{this.validateSubmitterEmail}}
+        @updatePublication={{this.updatePublication}}
+        @updateDoiInfo={{this.updateDoiInfo}}
+        @validateAndLoadTab={{this.loadNext}}
+      />`);
+
+    await doubleClick('[data-test-workflow-basics-next]');
+
+    assert.ok(this.loadNext.calledOnce, 'loadNext called once');
+  });
 });
diff --git a/tests/unit/controllers/submissions/new/basics-test.js b/tests/unit/controllers/submissions/new/basics-test.js
index 7517f560..138c127a 100644
--- a/tests/unit/controllers/submissions/new/basics-test.js
+++ b/tests/unit/controllers/submissions/new/basics-test.js
@@ -208,32 +208,4 @@ module('Unit | Controller | submissions/new/basics', (hooks) => {
     assert.true(controller.get('model.newSubmission.isProxySubmission'));
     controller.send('validateAndLoadTab', 'submissions.new.basics');
   });
-
-  /**
-   * Mock the submission model object with a custom `#save()` function. This test makes
-   * sure that the custom save function is called exactly once when the 'loadNext'
-   * action is sent to the controller.
-   */
-  test('make sure submission is saved', function (assert) {
-    assert.expect(2);
-
-    const controller = this.owner.lookup('controller:submissions/new/basics');
-    const model = {
-      publication: EmberObject.create({
-        title: 'This is the moo-iest',
-        journal: EmberObject.create({
-          id: 'journal:id',
-        }),
-        save: () => Promise.resolve(assert.ok(true)),
-      }),
-      newSubmission: EmberObject.create({
-        save: () => Promise.resolve(assert.ok(true)),
-      }),
-    };
-
-    controller.set('transitionToRoute', (route) => {});
-
-    controller.set('model', model);
-    controller.send('loadNext');
-  });
 });