diff --git a/app/assets/javascripts/admin/components/admin-web-hook-status.js.es6 b/app/assets/javascripts/admin/components/admin-web-hook-status.js.es6
index b023a330c72..30c2b9157ee 100644
--- a/app/assets/javascripts/admin/components/admin-web-hook-status.js.es6
+++ b/app/assets/javascripts/admin/components/admin-web-hook-status.js.es6
@@ -1,33 +1,31 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { iconHTML } from "discourse-common/lib/icon-library";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 
-export default Component.extend(
-  bufferedRender({
-    classes: ["text-muted", "text-danger", "text-successful", "text-muted"],
-    icons: ["far-circle", "times-circle", "circle", "circle"],
+export default Component.extend({
+  classes: ["text-muted", "text-danger", "text-successful", "text-muted"],
+  icons: ["far-circle", "times-circle", "circle", "circle"],
+  circleIcon: null,
+  deliveryStatus: null,
 
-    @discourseComputed("deliveryStatuses", "model.last_delivery_status")
-    status(deliveryStatuses, lastDeliveryStatus) {
-      return deliveryStatuses.find(s => s.id === lastDeliveryStatus);
-    },
+  @discourseComputed("deliveryStatuses", "model.last_delivery_status")
+  status(deliveryStatuses, lastDeliveryStatus) {
+    return deliveryStatuses.find(s => s.id === lastDeliveryStatus);
+  },
 
-    @discourseComputed("status.id", "icons")
-    icon(statusId, icons) {
-      return icons[statusId - 1];
-    },
+  @discourseComputed("status.id", "icons")
+  icon(statusId, icons) {
+    return icons[statusId - 1];
+  },
 
-    @discourseComputed("status.id", "classes")
-    class(statusId, classes) {
-      return classes[statusId - 1];
-    },
+  @discourseComputed("status.id", "classes")
+  class(statusId, classes) {
+    return classes[statusId - 1];
+  },
 
-    buildBuffer(buffer) {
-      buffer.push(iconHTML(this.icon, { class: this.class }));
-      buffer.push(
-        I18n.t(`admin.web_hooks.delivery_status.${this.get("status.name")}`)
-      );
-    }
-  })
-);
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.set("circleIcon", iconHTML(this.icon, { class: this.class }).htmlSafe());
+    this.set("deliveryStatus", I18n.t(`admin.web_hooks.delivery_status.${this.get("status.name")}`));
+  }
+});
diff --git a/app/assets/javascripts/admin/templates/components/admin-web-hook-status.hbs b/app/assets/javascripts/admin/templates/components/admin-web-hook-status.hbs
new file mode 100644
index 00000000000..7aa2d1455f4
--- /dev/null
+++ b/app/assets/javascripts/admin/templates/components/admin-web-hook-status.hbs
@@ -0,0 +1 @@
+{{circleIcon}} {{deliveryStatus}}
diff --git a/app/assets/javascripts/admin/templates/web-hooks.hbs b/app/assets/javascripts/admin/templates/web-hooks.hbs
index 389f7d48155..e63dac08281 100644
--- a/app/assets/javascripts/admin/templates/web-hooks.hbs
+++ b/app/assets/javascripts/admin/templates/web-hooks.hbs
@@ -1,4 +1,3 @@
-
 <div class='web-hooks-listing'>
   <p>{{i18n 'admin.web_hooks.instruction'}}</p>
   <div class='new-webhook'>