Improve message rendering removing MessageAction from render time

packages/rocketchat-lib/client/MessageAction.coffee

@@ -32,6 +32,10 @@ RocketChat.MessageAction = new class
 				btns[id] = _.extend btns[id], config
 				buttons.set btns
 
+	getButtonById = (id) ->
+		allButtons = buttons.get()
+		return allButtons[id]
+
 	getButtons = (message) ->
 		allButtons = _.toArray buttons.get()
 		if message
@@ -50,6 +54,7 @@ RocketChat.MessageAction = new class
 	removeButton: removeButton
 	updateButton: updateButton
 	getButtons: getButtons
+	getButtonById: getButtonById
 	resetButtons: resetButtons
 
 Meteor.startup ->
@@ -111,4 +116,4 @@ Meteor.startup ->
 				chatMessages[Session.get('openedRoom')].deleteMsg(message)
 		validation: (message) ->
 			return RocketChat.authz.hasAtLeastOnePermission('delete-message', message.rid ) or RocketChat.settings.get('Message_AllowDeleting') and message.u?._id is Meteor.userId()
-		order: 2
+		order: 2

packages/rocketchat-ui-message/message/message.coffee

@@ -1,6 +1,4 @@
 Template.message.helpers
-	actions: ->
-		return RocketChat.MessageAction.getButtons(this)
 	own: ->
 		return 'own' if this.u?._id is Meteor.userId()
 	chatops: ->

packages/rocketchat-ui-message/message/message.html

@@ -22,19 +22,10 @@
 		{{#if private}}
 			<span class="private">{{_ "Only_you_can_see_this_message"}}</span>
 		{{/if}}
-		{{#if actions.length}}
-			<div class="message-cog-container">
-				<i class="icon-cog message-cog" aria-label="{{_ "Actions"}}"></i>
-				<div class="message-dropdown">
-					<ul>
-						<li class="message-dropdown-close"><i class=" icon-angle-left" aria-label="{{_ "Close"}}"></i></li>
-						{{#each actions}}
-							<li class="{{id}} {{classes}} message-action" title="{{_ i18nLabel}}"><i class="{{icon}}" aria-label="{{_ i18nLabel}}"></i></li>
-						{{/each}}
-					</ul>
-				</div>
-			</div>
-		{{/if}}
+
+		<div class="message-cog-container">
+			<i class="icon-cog message-cog" aria-label="{{_ "Actions"}}"></i>
+		</div>
 		</span>
 		<div class="body" dir="auto">
 			{{{body}}}

packages/rocketchat-ui-message/message/messageDropdown.html

@@ -0,0 +1,12 @@
+<template name="messageDropdown">
+	<div class="message-dropdown">
+		<ul>
+			<li class="message-dropdown-close"><i class=" icon-angle-left" aria-label="{{_ "Close"}}"></i></li>
+			{{#if actions.length}}
+				{{#each actions}}
+					<li class="{{id}} {{classes}} message-action" title="{{_ i18nLabel}}" data-id="{{id}}"><i class="{{icon}}" aria-label="{{_ i18nLabel}}"></i></li>
+				{{/each}}
+			{{/if}}
+		</ul>
+	</div>
+</template>

packages/rocketchat-ui-message/package.js

@@ -24,6 +24,7 @@ Package.onUse(function(api) {
 
 	api.addFiles('message/message.html', 'client');
 	api.addFiles("message/messageBox.html", "client");
+	api.addFiles("message/messageDropdown.html", "client");
 	api.addFiles("message/popup/messagePopup.html", "client");
 	api.addFiles("message/popup/messagePopupChannel.html", "client");
 	api.addFiles("message/popup/messagePopupConfig.html", "client");
@@ -38,4 +39,4 @@ Package.onUse(function(api) {
 	api.addFiles("message/popup/messagePopupEmoji.coffee", "client");
 
 
-});
+});

packages/rocketchat-ui/views/app/room.coffee

@@ -332,9 +332,29 @@ Template.room.events
 		instance.showUsersOffline.set(!instance.showUsersOffline.get())
 
 	'click .message-cog': (e) ->
-		message_id = $(e.currentTarget).closest('.message').attr('id')
+		message = @_arguments[1]
 		$('.message-dropdown:visible').hide()
-		$(".messages-box \##{message_id} .message-dropdown").show()
+
+		dropDown = $(".messages-box \##{message._id} .message-dropdown")
+
+		if dropDown.length is 0
+			actions = RocketChat.MessageAction.getButtons message
+
+			el = Blaze.toHTMLWithData Template.messageDropdown,
+				actions: actions
+
+			$(".messages-box \##{message._id} .message-cog-container").append el
+
+			dropDown = $(".messages-box \##{message._id} .message-dropdown")
+
+		dropDown.show()
+
+	'click .message-dropdown .message-action': (e, t) ->
+		el = $(e.currentTarget)
+
+		button = RocketChat.MessageAction.getButtonById el.data('id')
+		if button?.action?
+			button.action.call @, e, t
 
 	'click .message-dropdown-close': ->
 		$('.message-dropdown:visible').hide()
@@ -416,12 +436,6 @@ Template.room.onCreated ->
 	@autorun ->
 		self.subscribe 'fullUserData', Session.get('showUserInfo'), 1
 
-	for button in RocketChat.MessageAction.getButtons()
-		if _.isFunction button.action
-			evt = {}
-			evt["click .#{button.id}"] = button.action
-			Template.room.events evt
-
 
 Template.room.onDestroyed ->
 	RocketChat.TabBar.resetButtons()