The ui loader spinner is not properly displayed in Nuxt 3 App

Question

The data is loaded correctly, but when they are loaded, I do not see a loader that would demonstrate to the user that the data is being loaded. At the same time, when I try to specify in the template condition the display as v-if="!loader.value" loader appears correctly. There was an assumption that the data is loaded so fast that the template has time to render the data, and the loader simply does not fall under the conditions, but this option disappeared after I tried to explicitly set the speed of the Internet connection in the browser. Also, loading states correctly displaying true/false value to the console when app making async request, but not showing up the loader in the UI. What can be solution here?

Nuxt .vue component:

    <template>
      <div v-if="loading.value" class="loader">
        <div class="lds-ellipsis">
          <div />
          <div />
          <div />
          <div />
        </div>
      </div>
      <v-container fluid fill-height v-else>
        <v-layout justify-center align-center>
          <div class="education">
            <div class="education__timeline">
              <v-timeline>
                <v-timeline-item
                    content appears here after successful loading
                </v-timeline-item>
              </v-timeline>
            </div>
          </div>
        </v-layout>
      </v-container>
    </template>

<script setup lang="ts">
    const eduTimeline = ref<IEduTimeline[]>([]);
    const loading = ref(true);
    onMounted(() => {
      nextTick(async () => {
        try {
          console.log(loading.value) // correctly loggs out - true
          const {data} = await useFetch<IData>('/data.json')
          if (data && data.value && data.value.education) {
              eduTimeline.value = data.value.education;
          }
        } catch (error) {
          console.error(error);
        } finally {
          loading.value = false
          console.log(loading.value) // correctly loggs out - false
    
        }
      })
    });

<script>

css of loader:

.loader {
  display: flex;
  justify-content: center;
  margin-top: 6em;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #4177be;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

Answer 1

Fixed the issue, changed in template from loading.value to loading. Thx, to @qiqqq