Skip to content

Show loading message when group path API request is canceled

Peter Hegman requested to merge peterhegman/fix-new-group-path-loading-message into master

What does this MR do and why?

In #361816 (closed) we refactored the Group name and Group URL fields from HAML/jQuery to Vue. This also involved adding logic to cancel in-flight API requests if a new API request is fired. This is because the API response can take some time so even with debouncing it is possible that multiple API requests are fired.

This MR fixes a bug where the loading message is removed if a request is canceled even though there is still an active request.

Screenshots or screen recordings

Before After
Screen_Recording_2022-06-16_at_5.07.31_PM Screen_Recording_2022-06-16_at_5.08.20_PM

How to set up and validate locally

  1. Navigate to http://gdk.test:3000/groups/new#create-group-pane
  2. Open Chrome dev tools and navigate to the Network tab
  3. From the No throttling dropdown select Add
  4. Click Add custom profile and enter 1 for Download and Upload.
  5. Choose your custom throttling from the dropdown
  6. Enter text in the Group name field and wait 1 second for the debouncing to finish
  7. Enter more text in the Group name field. The loading message should still be shown and the previous request should be canceled

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Peter Hegman

Merge request reports