<commit_before>@import '../variables';
@import '../mixins';

// H/V center items in the middle of the overlay
%center-items-in-overlay {
  display: table;

  > .#{$prefix}-container-wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
}

.#{$prefix}-ui-buffering-overlay {
  @extend %ui-container;
  @extend %center-items-in-overlay;

  @include layout-cover;
  @include hidden-animated($animation-duration * 2);

  background-color: $color-background-highlight;

  > .#{$prefix}-container-wrapper {
    padding: 3em;
  }

  a {
    color: $color-primary;

    &:hover,
    &:visited {
      color: $color-primary;
    }
  }

  .#{$prefix}-ui-buffering-overlay-indicator {
    $buffering-animation-duration: 2s;
    $buffering-animation-delay: $buffering-animation-duration / 10;

    @keyframes fancy {
      0% {
        opacity: 0;
        transform: scale(1);
      }

      20% {
        opacity: 1;
      }

      30% {
        opacity: 1;
      }

      50% {
        opacity: 0;
        transform: scale(2);
      }

      100% {
        opacity: 0;
        transform: scale(3);
      }
    }

    animation: fancy $buffering-animation-duration ease-in infinite;
    background: svg('assets/skin-modern/images/loader.svg') no-repeat center;
    display: inline-block;
    height: 2em;
    margin: .2em;
    width: 2em;

    @for $i from 1 through 3 {
      &:nth-child(#{$i}) {
        animation-delay: $buffering-animation-delay * ($i - 1);
      }
    }
  }
}
<commit_msg>Prevent buffering animation while overlay is hidden<commit_after>@import '../variables';
@import '../mixins';

// H/V center items in the middle of the overlay
%center-items-in-overlay {
  display: table;

  > .#{$prefix}-container-wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
}

.#{$prefix}-ui-buffering-overlay {
  @extend %ui-container;
  @extend %center-items-in-overlay;

  @include layout-cover;
  @include hidden-animated($animation-duration * 2);

  background-color: $color-background-highlight;

  > .#{$prefix}-container-wrapper {
    padding: 3em;
  }

  a {
    color: $color-primary;

    &:hover,
    &:visited {
      color: $color-primary;
    }
  }

  .#{$prefix}-ui-buffering-overlay-indicator {
    $buffering-animation-duration: 2s;
    $buffering-animation-delay: $buffering-animation-duration / 10;

    @keyframes fancy {
      0% {
        opacity: 0;
        transform: scale(1);
      }

      20% {
        opacity: 1;
      }

      30% {
        opacity: 1;
      }

      50% {
        opacity: 0;
        transform: scale(2);
      }

      100% {
        opacity: 0;
        transform: scale(3);
      }
    }

    animation: fancy $buffering-animation-duration ease-in infinite;
    background: svg('assets/skin-modern/images/loader.svg') no-repeat center;
    display: inline-block;
    height: 2em;
    margin: .2em;
    width: 2em;

    @for $i from 1 through 3 {
      &:nth-child(#{$i}) {
        animation-delay: $buffering-animation-delay * ($i - 1);
      }
    }
  }

  &.#{$prefix}-hidden {
    .#{$prefix}-ui-buffering-overlay-indicator {
      display: none;
    }
  }
}

{'fraction_non_alphanumeric': 0.1526861451460886, 'fraction_numerical': 0.018221803330191643, 'mean_word_length': 2.19358074222668, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4260197', 'n_tokens_mistral': 1136, 'n_tokens_neox': 1049, 'n_words': 214}