Non-default text sizes cause loading icon to shift text in the File tree browser

Summary

When users have non-default text sizes configured in their browser, the loading icon in the file tree browser causes text to shift when it appears.

Problem

The file tree browser displays a loading spinner when expanding folders. When users configure larger text sizes, the loading spinner scales with user preferences while the folder icon does not, causing visible text shifting.

Root cause: GlIcon uses fixed px values while GlLoadingIcon uses rem values.

Steps to reproduce

  1. Change browser default text size to Large [+1]
  2. Navigate to a repository with the file tree browser
  3. Expand a folder and observe the loading state
  4. Notice text shifts when loading icon appears/disappears

From the test session

Proposed solution

Blocked by: gitlab-org/gitlab-services/design.gitlab.com#3276

Interim workaround

Override GlIcon size styles to use rem-based values:

iconStyle() {
  const remSize = this.size / 16;
  return { width: `${remSize}rem`, height: `${remSize}rem` };
}

Related issues