How to add a loader to each element when an action occurs?

Question

JavaScript

There is such a problem, there is a common component in which I receive an object with data and carry out operations (editing, deleting, saving), at the moment when the object is being edited, I show the loader, when I save, I hide it. The state of the loader, I write to the boolean value isLoading in the model where the object is formed:

createTile(e){
            const { x, y, tileType } = e
            const template = this.getTileByType(tileType)
            // NOTE - id should be unique enough to avoid
            //   collisions with other tiles in this view
            const id = `temp-${Math.floor(Math.random() * Math.floor(8675309))}`
            const tile = {
                id,
                name: template.label,
                tileType,
                renderConfig: { ...template.defaultConfig },
                // TODO - serialize query and params here (for future backend use)
                queryJSON: [],
                isLoading: false  //  LOADER VALUE
            }
            const layout = {
                tileId: id,
                x,
                y,
                w: 1,
                h: 1,
                isNew: true,
            }
            this.$set(this.localValue, id, {
                tile,
                layout,
            })
            this.editTileIsNew = true
            this.onTileEdit(id)
        },

The state of the loader, I change in the save and edit methods:

onTileEdit(id){
            const { tile } = this.localValue[id]
            this.editableTile = tile
            this.editableTile.isLoading = true // new Loder value
            this.editableTileTemplate = this.getTileByType(tile.tileType)
            // backup tile config to restore on cancel
            this.editableTileBackup = clone(tile)
  if (this.editTileIsNew) {
                this.$delete(this.localValue, id)
            } else {
                this.editableTileBackup.isLoading = false
                // restore from backup
                this.$set(this.localValue, id, {
                    layout: this.localValue[id].layout,
                    tile: this.editableTileBackup,
                })
            }
   onTileEditComplete(){
            this.editableTile.isLoading = false
            this.editTileIsNew = null
            this.editableTile = null
            this.editableTileTemplate = null
}

And then I pass the value of the loader to the component where the entities are displayed in which, I display this loader if actions occur (editing, saving):

<z-dashboard-tile
                        :title="tileForId(item.tileId).name"
                        :type="tileForId(item.tileId).tileType"
                        :config="tileForId(item.tileId).renderConfig"
                        :editable="true"
                        :isLoadingFirst="tileForId(item.tileId).isLoading" // loader value
                    >

The question is how to implement a loader without adding isLoading to the object model, so that it is local and does not extend the model, please help

Answer 1

data: () => ({
  loadings: {}
}),

methods: {
  isLoading(tile) {
    return this.loadings[tile.id];
  }
}

Maybe something like that?