fixing instant updates of last post on (categories) home page

templates/categories.tpl

@@ -2,7 +2,7 @@
 	<p>Categories</p>
 
 	<!-- BEGIN categories -->
-	<li data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}" class="row clearfix">
+	<li component="categories/category" data-cid="{categories.cid}" data-numRecentReplies="1" class="row clearfix">
 		<meta itemprop="name" content="{categories.name}">
 
 		<div class="col-md-7 col-sm-9 col-xs-11 content">

templates/partials/categories/lastpost.tpl

@@ -1,21 +1,25 @@
 <div class="card" style="border-color: {categories.bgColor}">
 	<!-- BEGIN posts -->
 	<!-- IF @first -->
-	<p>
-		<strong>{categories.posts.user.username}</strong>
-		<a class="permalink" href="{relative_path}/topic/{categories.posts.topic.slug}<!-- IF categories.posts.index -->/{categories.posts.index}<!-- ENDIF categories.posts.index -->">
-			<small class="timeago" title="{categories.posts.relativeTime}"></small>
-		</a>
-	</p>
-	<div class="post-content">
-		{categories.posts.content}
+	<div component="category/posts">
+		<p>
+			<strong>{categories.posts.user.username}</strong>
+			<a class="permalink" href="{relative_path}/topic/{categories.posts.topic.slug}<!-- IF categories.posts.index -->/{categories.posts.index}<!-- ENDIF categories.posts.index -->">
+				<small class="timeago" title="{categories.posts.relativeTime}"></small>
+			</a>
+		</p>
+		<div class="post-content">
+			{categories.posts.content}
+		</div>
 	</div>
 	<!-- ENDIF @first -->
 	<!-- END posts -->
 
 	<!-- IF !posts.length -->
-	<div class="post-content">
-		No new posts.
-	</div>
+	<div component="category/posts">
+		<div class="post-content">
+			No new posts.
+		</div>
+	<div>
 	<!-- ENDIF !posts.length -->
 </div>