repeated loading of loader component

[Grapeve]

The following image is two examples of the official website. I have written these two examples in one application. The text value eventName of the text component is responsive by using ref of vue. Changing the value of eventName in the script setup resulted in repeated loading of the loader component.

my code:

<!-- eslint-disable no-unused-vars -->
<script setup lang="ts">
import { Application, Loader } from 'vue3-pixi'
import { ref } from 'vue'

const eventName = ref('none')
const evtHandler = (name: string, evt: any) => {
  eventName.value = name
  // console.log('name: ', name, 'evt: ', evt)
}

const onResolved = (sheet: any) => {
  // console.log('sheet: ', sheet)
}
</script>

<template>
  <Application
    :width="640"
    :height="480"
    :antialias="true"
  >
    <Container>
      <Sprite
        texture="/textures/mushroom.png"
        :position="[320, 60]"
        :anchor="0.5"
        event-mode="dynamic"
        @pointermove="(evt) => evtHandler('pointermove', evt)"
        @pointerleave="(evt) => evtHandler('pointerleave', evt)"
        @click="(evt) => evtHandler('click', evt)"
      ></Sprite>
      <text
        ref="textRef"
        :position="[320, 110]"
        :anchor="0.5"
        :style="{ fill: '#1e9f', fontSize: 28 }"
        >{{ eventName }}</text
      >
    </Container>
    <Container :position="[0, 160]">
      <Loader
        :resources="{ spritesheet: '/textures/adventurer-spritesheet.json' }"
        @resolved="onResolved($event.spritesheet)"
        @progress="(progress) => console.log(progress)"
      >
        <AnimatedSprite
          :textures="['adventurer-idle-00.png', 'adventurer-idle-01.png', 'adventurer-idle-02.png']"
          playing
          :animation-speed="0.1"
          :scale="2"
        ></AnimatedSprite>
      </Loader>
    </Container>
  </Application>
</template>

[Grapeve]

This will not happen if I directly modify the value of the text by getting the text component instance through ref. textRef.value.text = xxx. There won't be any warming here

[hairyf]

This looks strange because the text component is not related to the Loader

You can try using the text attribute <text: text="eventName"/> to see if the problem is resolved, and I will use your use case to conduct a test

[Grapeve]

using the text attribute <text: text="eventName"/> will give the same warmming.

It's quite strange. If I only write one listening event @click="(evt) => evtHandler('click', evt)". When I first click the sprite, changing the eventName value of text component, it will also have warning on console about repeated loading, but only once.

Just the picture I showed above, If you quickly move and leave the mushroom sprite, you will find animatedSprite feels like it's stationary