<commit_before><dom-module id="vaadin-grid-data-provider-themability-styles">
  <template>
    <style>

      /* Anim */
      @keyframes vaadin-grid-spin-360 {
        100% {
          transform: rotate(360deg);
        }
      }
      @-webkit-keyframes vaadin-grid-spin-360 {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      #spinner {
        border: 2px solid var(--primary-color, #03A9F4);
        border-radius: 50%;
        border-right-color: transparent;
        border-top-color: transparent;
        content: "";
        height: 16px;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
        width: 16px;
        pointer-events: none;
        opacity: 0;
        @apply(--vaadin-grid-loading-spinner);
      }

      :host([loading]) #spinner {
        opacity: 1;
        -webkit-animation: vaadin-grid-spin-360 400ms linear infinite;
        animation: vaadin-grid-spin-360 400ms linear infinite;
      }

      :host([loading])::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        pointer-events: none;
        @apply(--vaadin-grid-loading-backdrop);
      }

    </style>
  </template>
</dom-module>


<script>
  window.vaadin = window.vaadin || {};
  vaadin.elements = vaadin.elements || {};<commit_msg>Only cover the items with loading backdrop<commit_after><dom-module id="vaadin-grid-data-provider-themability-styles">
  <template>
    <style>

      /* Anim */
      @keyframes vaadin-grid-spin-360 {
        100% {
          transform: rotate(360deg);
        }
      }
      @-webkit-keyframes vaadin-grid-spin-360 {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      #spinner {
        border: 2px solid var(--primary-color, #03A9F4);
        border-radius: 50%;
        border-right-color: transparent;
        border-top-color: transparent;
        content: "";
        height: 16px;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
        width: 16px;
        pointer-events: none;
        opacity: 0;
        @apply(--vaadin-grid-loading-spinner);
      }

      :host([loading]) #spinner {
        opacity: 1;
        -webkit-animation: vaadin-grid-spin-360 400ms linear infinite;
        animation: vaadin-grid-spin-360 400ms linear infinite;
      }

      :host([loading]) #items::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        pointer-events: none;
        z-index: 1;
        @apply(--vaadin-grid-loading-backdrop);
      }

    </style>
  </template>
</dom-module>


<script>
  window.vaadin = window.vaadin || {};
  vaadin.elements = vaadin.elements || {};
{'fraction_non_alphanumeric': 0.14089121887287026, 'fraction_numerical': 0.04685452162516383, 'mean_word_length': 1.7779799818016377, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, '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': '3386124', 'n_tokens_mistral': 1105, 'n_tokens_neox': 942, 'n_words': 191}