Fix cumulative layout shift

Question

Got a problem with CLS score which is being affected by this component on mobile devices.

This is how component loos like on initial load when browser's default font loads in:

This is what happens after my custom font is loading:

Here is my css:

.text__list {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.text__item {
  display: none;

  &:nth-child(2) {
    .text__icon {
      display: none;
    }
  }

  &:nth-last-child(-n+3) {
    display: inline-block;
  }

  @media (min-width: $screen-sm) {
    display: inline-block;
  }
}

Here is my VUE html:

<ol class="text__list" data-cy="text-list">
  <li class="text__read-more" :class="{'text__read-more--hidden': isShowingMore}">
    <button class="text__read-more-button" @click="showMore" data-cy="text-read-more" title="Read more">
      <Icon class="text__read-more-icon" name="dots-horizontal" />
    </button>
  </li>
  <li v-for="(item, index) of items" :key="index" class="text__item" :class="{'text__item--visible': isShowingMore}">
    <Icon class="text__icon" name="chevron-right" />
    <AppLink class="text__link" :class="{'text__link--active': isCurrentPage(index)}" :to="item.href" :router-link="item.routerLink === true" :aria-current="isCurrentPage(index)" data-cy="text-link">{{ item.title }}</AppLink>
  </li>
</ol>