# Use Ember.PromiseProxyMixin in a theme

**URL:** <https://meta.discourse.org/t/use-ember-promiseproxymixin-in-a-theme/147231>\
**Category:** Developers\
**Tags:** how-to, theme-guides\
**Created:** [April 8, 2020, 8:21am UTC](https://meta.discourse.org/t/use-ember-promiseproxymixin-in-a-theme/147231 "2020-04-08T08:21:39Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![zcuric](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zcuric/32/292837_2.png) [@zcuric](https://meta.discourse.org/u/zcuric)\
**Post date:** [April 8, 2020, 8:21am UTC](https://meta.discourse.org/t/use-ember-promiseproxymixin-in-a-theme/147231/1 "2020-04-08T08:21:39Z")

</div>

Recently the Ember.PromiseProxyMixin was added to ember modules in the discourse core.

[https://github.com/discourse/discourse/pull/9312](https://github.com/discourse/discourse/pull/9312)

It’s very useful Ember mixin which allows you to make async requests and to work easily with Promises inside Ember components. Think of it as [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) but for Ember. The potential is huge for theme and plugin development in discourse.

Here is the [official Ember documentation for Ember.PromiseProxyMixin](https://api.emberjs.com/ember/3.12/classes/PromiseProxyMixin).

And [here you can find a detailed non-discourse example how to use Ember.PromiseProxyMixin](https://lolma.us/en/blog/promise-proxy-mixin/).

I’ll give a simple example how can this mixin be used inside discourse theme. Let’s say for some reason in `topic-list-item` component you want to style the poster avatar if the poster is staff member, the avatar has to have a different border.

Somewhere in `topic-list-item.js(.es6)` you will have to:

- Import `EmberObject `and `PromiseProxyMixin` and extend EmberObject with PromiseProxyMixin

```js
import EmberObject from "@ember/object";
import PromiseProxyMixin from "@ember/object/promise-proxy-mixin";

const PromiseObject = EmberObject.extend(PromiseProxyMixin);

// You can use a custom memoize function to prevent multiple request for same users
const getUser = memoize(username => ajax(`/u/${username}`).then(data => data));

```

- Then you will have make these computed properties

```js
  // Computed Promise
  @discourseComputed("topic")
  posterPromise(topic) {
    const { user } = topic.posters[0];
    return getUser(user.username);
  },

 // This CP wraps the promise with with `PromiseObject`
  @discourseComputed("posterPromise")
  posterProxy() {
    const promise = this.get("posterPromise");
    return promise && PromiseObject.create({ promise });
  },

  posterData: reads("posterProxy.content.user"),

  @discourseComputed("posterData")
  isStaff() {
    const posterData = this.get("posterData");
    if (!posterData) return false;
    const { groups = [] } = posterData;
    // To see if the user is a staff member we have to check
    // if the use belongs to a staff group
    return groups.some(({ name }) => name === "staff");
  }

```

And in the template `topic-list-item.hb(r|s)` you would have something like this:

```handlebars
  {{#if posterProxy.isFulfilled}}
    {{#if isStaff}}
      // do your customisation
    {{/if}}
  {{/if}}

```

You can utilise `isPending` to show a loader maybe.

I hope this not-so-useful example can help you figure out how the mixin works and maybe it helps you find a way you could use it in your theme/plugin development.

👋

---

_[View the full topic](https://meta.discourse.org/t/use-ember-promiseproxymixin-in-a-theme/147231)._