Follow-up from "Update the Overview tab when the MR has finished async preparation"

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

The following discussion from !120770 (merged) should be addressed:

• @iamphill started a discussion: (+1 comment)

  For this component we should use <state-container /> like the other state components so it would end up something like:

  <script>
  import StateContainer from '../state_container.vue';
  import { MR_WIDGET_PREPARING_ASYNCHRONOUSLY } from '../../i18n';
  
  export default {
    name: 'MRWidgetPreparing',
    i18n: {
      preparing: MR_WIDGET_PREPARING_ASYNCHRONOUSLY,
    },
    components: {
      StateContainer,
    },
  };
  </script>
  <template>
    <state-container status="loading">
      {{ $options.i18n.preparing }}
    </state-container>
  </template>
  

Problem

The spinner in the MR isn't the standard size we use for most of the rest of the widgets.

Possible Solutions

1. Do nothing. Allow some custom variants.
2. Use state-container as-is.
3. Update the state-container (and it's nested child components) to take a size parameter.
4. Bring in design to take a look at the unified approach and see if there's a middle ground.

Associated Notes

1. We should document the boundary rules, like "spinner sizes may vary when only one can be visible at a time" (as with the preparing widget)
2. Design explicitly chose to not use the sm spinner size that state-container renders
3. Allowing for sizes may subvert the intent of a single component that unifies the look of the available spinners
4. They've already looked at small versus medium spinners in this context and felt that medium was better.