Misago/emberapp/app/templates/components/last-username-changes.hbs

<h4>{{gettext "Last changes history"}}</h4>
{{#if isLoaded}}
<ul class="list-group">
  {{#each model as |change|}}
  <li class="list-group-item">
    <div class="side-avatar hidden-md hidden-lg">
      {{#if change.changed_by}}
        {{#link-to 'user' change.changed_by.url_name}}
          {{user-avatar user=change.changed_by size=42}}
        {{/link-to}}
      {{else}}
        <span>{{user-avatar user=change.changed_by size=42}}</span>
      {{/if}}
    </div>

    <div class="first-row">
      {{#if change.changed_by}}
        {{#link-to 'user' change.changed_by.url_name class="hidden-xs hidden-sm"}}
          {{user-avatar user=change.changed_by size=20}}
        {{/link-to}}
        {{#link-to 'user' change.changed_by.url_name class="item-name right-margin"}}
          {{change.changed_by.username}}
        {{/link-to}}
      {{else}}
        <span class="hidden-xs hidden-sm">{{user-avatar user=change.changed_by size=20}}</span>
        <strong class="item-name right-margin">{{change.changed_by_username}}</strong>
      {{/if}}

      {{change.old_username}} <i class="material-icons">arrow_forward</i> {{change.new_username}}
    </div>
    <div class="second-row text-muted" title="{{format-date change.changed_on tick=clock.tick}}">
      <strong class="item-name right-margin">{{change.changed_by_username}}</strong>
      {{rel-date change.changed_on tick=clock.tick}}
    </div>
  </li>
  {{else}}
  <li class="list-group-item">
    <i class="material-icons">info_outline</i>
    {{gettext "Your username was never changed."}}
  </li>
  {{/each}}
</ul>
{{else}}
<div class="ui-preview list-group-preview">
  {{#each (x-range 5) as |placeholder|}}
  <div class="fill">
    <div class="side-avatar hidden-md hidden-lg">
      <div class="ui-preview-img avatar-preview" style="width: 42px; height: 42px;"></div>
    </div>

    <div class="first-row">
      <span class="ui-preview-img avatar-preview hidden-xs hidden-sm" style="width: 20px; height: 20px;">&nbsp;</span>
      {{ui-text-preview class="ui-preview-text item-name right-margin"}}

      {{ui-text-preview class="ui-preview-text"}}
      <i class="material-icons">arrow_forward</i>
      {{ui-text-preview class="ui-preview-text"}}
    </div>
    <div class="second-row text-muted">
      {{ui-text-preview minLength=10 maxLength=18 class="ui-preview-text"}}
    </div>
  </div>
  {{/each}}
</div>
{{/if}}