Skip to content

Indicate loading and disable elements in forms

Lukas Weingarten requested to merge 646-prevent-duplicate-post-request-caused-by-impatient-users into master

To indicate that a form is currently loading while performing a request, input elements should be disabled and action buttons should indicate loading.

For this create the following:

FormService: Handle and provide current form state (disabled or enabled).

DisableFormDirective: Disable input fields and other elements while form is disabled via service. Use via appDisableForm. This directive can be used if the component doesn't extend to FormComponent where formDisabled can be used for disabling elements.

FormComponent: Abstract component for simply bringing disabling/enabling of current form to other components. Communicates with form service and provides formDisabled variable, which is updated automatically. If a form control is set via setFormControl(ormControl: FormControl), it will be disabed/enabled automatically according to current state as well.

LoadingButtonComponent: Component which displays a mat-raised-button or mat-flat-button according to isDialog flag. While the current form is disabled after button is clicked, the button is disabled and a loading indicator is displayed instead of the button text.

Indicate loading and disable form for components of core module

Use LoadingButtonComponent and disable form inputs while loading for following components:

  • LoginComponent
  • RegisterComponent
  • PasswordResetComponent
  • RequestPasswordComponent
  • RoomListComponent
  • UserProfileComponent
  • RoomCreateComponent

For this also extend DialogService and BaseDialogComponent so that room creation and all delete dialogs can indicate progress. With this changes, dialogs which perform a request do not close until request has been completed. Also they stay open and enable form again, if request has been completed with an error.

Indicate loading and disable form for components of creator, presentation and shared module

Use LoadingButtonComponent and disable form inputs while loading for the following:

Creator:

  • Series creation dialog
  • Series deletion dialog
  • Series answer deletion dialog
  • Content creation/edit
  • Content deletion dialog
  • Content answer deletion dialog
  • Start new round dialog
  • Comment list deletion dialog
  • Comment deletion dialog
  • Comment answering
  • Room deletion dialog
  • Room settings edit
  • Edit access rights
  • Remove access rights dialog
  • Create/Edit announcement
  • Delete announcement dialog
  • Start/Stop live feedback
  • Change live feedback type

Presentation:

  • Publish series dialog

Shared:

  • Comment creation dialog
  • Content answer deletion/ban dialog
  • Formatting toolbar

For this, refactor live feedback logic for creator and presentation page so that loading button and other components can wait for success of starting/stopping feedback or changing type.

Also refactor room settings. Use the loading button here as well and stop disabling it if there are no changes for consistency.

Indicate loading and disable form for participants content answer components

Use LoadingButtonComponent and disable form inputs while loading for all content answer components.

Indicate loading and disable form for admin interface components 

Use LoadingButtonComponent and disable form inputs while loading for room and user management.

Closes #646 (closed)

Edited by Lukas Weingarten

Merge request reports