Proxy Array with Record Fadeout

components.proxy-list.js

import Ember from 'ember';
import { copy } from '@ember/object/internals';
import { later } from '@ember/runloop';
import { set } from '@ember/object';

export default Ember.Component.extend({
  didReceiveAttrs () {
    this._super(...arguments);
    if (!this.recordsProxy) {
      this.recordsProxy = copy(this.records);
      return;
    }
    let newRecordsProxy = copy(this.recordsProxy);
    this.records.forEach((record, index) => {
      if (this.recordsProxy.indexOf(record) === -1) {
        newRecordsProxy.push(record);
      }
    });
    this.set('recordsProxy', newRecordsProxy);
  },
  actions: {
    removeRecord (record) {
      this.removeRecord(record);
      set(record, 'deleted', true);
      later(() => {
        this.$(`li:contains(${record.id} | Deleted!)`).fadeOut();
        let index = this.recordsProxy.indexOf(record);
        this.recordsProxy.splice(index, 1);
      }, 3000);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  init () {
    this._super(...arguments);
    this.records = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
  },
  nextId: 5,
  actions: {
    addRecord () {
      this.records.addObject({ id: this.nextId++ });
    },
    addRecordRebuildArray () {
      this.set('records', [...this.records, { id: this.nextId++ }]);
    },
    removeRecord (record) {
      this.records.removeObject(record);
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<h2>Proxied records:</h2>
{{proxy-list records=records removeRecord=(action "removeRecord")}}
<h2>Records:</h2>
<button {{action 'addRecord'}}>Add Record ( will not update the proxied list )</button>
<button {{action 'addRecordRebuildArray'}}>Add Record to new Array ( WILL update the proxied list )</button>
{{#each records as |record|}}
<li>{{record.id}}</li>
{{/each}}
<br>
<br>

templates.components.proxy-list.hbs

{{#each recordsProxy as |record|}}
<li>{{record.id}} | {{#if record.deleted}}Deleted!
  {{else}}
    <a href="#" {{action "removeRecord" record}}>Delete</a>
  {{/if}}
</li>
{{/each}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}