Add loading icon to audit event apps

Problem to solve

The audit events app takes about ~700ms to load the Vue content, during which the page section appears blank.

We can increase the perceived performance of our audit event apps by adding a loading spinner while the main application is loading.

Screenshots

image

Kapture_2022-05-30_at_17.27.00

Suggested solution

Add a loading spinner while the Vue app loads.

#js-audit-log-app{ data: {...} }
  = gl_loading_icon(size: 'lg', css_class: 'gl-my-7')

This is similar to what we do in the admin/users page.

Implementation plan

Add the loading icon wherever the audit events app is initialized:

  1. ee/app/views/admin/audit_logs/index.html.haml (#368604 - closed)
  2. ee/app/views/groups/audit_events/index.html.haml (#368605 - closed)
  3. ee/app/views/projects/audit_events/index.html.haml (#368606 - closed)
Edited by Jiaan Louw