Regression: Fix directory table loading (#11223)

* test if we have usernames on rooms

* fix directory table loading

* fix directory indentation

packages/rocketchat-theme/client/imports/components/table.css

@@ -12,7 +12,7 @@
 	}
 
 	& tbody {
-		& tr {
+		& tr:not(.table-loading) {
 			cursor: pointer;
 
 			&:hover {
@@ -203,3 +203,11 @@
 	text-overflow: ellipsis;
 	text-transform: capitalize;
 }
+
+.table-loading {
+	height: 10px;
+}
+
+.table-loading-td {
+	position: relative;
+}

packages/rocketchat-ui/client/components/table.js

@@ -16,7 +16,7 @@ Template.table.onDestroyed(function() {
 });
 
 Template.table.events({
-	'click tbody tr'(e, t) { t.data.onItemClick && t.data.onItemClick(this); },
+	'click tbody tr:not(.table-loading)'(e, t) { t.data.onItemClick && t.data.onItemClick(this); },
 	'scroll .table-scroll': _.debounce((e, t) => t.data.onScroll && t.data.onScroll(e.currentTarget), 300),
 	'click .js-sort'(e, t) { t.data.onSort(e.currentTarget.dataset.sort); }
 });

packages/rocketchat-ui/client/views/app/directory.html

@@ -56,6 +56,11 @@
 								<td>{{topic}}</td>
 							</tr>
 						{{/each}}
+						{{#if isLoading}}
+							<tr class="table-loading">
+								<td class="table-loading-td" colspan="{{#if showLastMessage}}5{{else}}4{{/if}}">{{> loading}}</td>
+							</tr>
+						{{/if}}
 					</tbody>
 				{{/table}}
 			{{/if}}
@@ -92,8 +97,8 @@
 							</tr>
 						{{/each}}
 						{{#if isLoading}}
-							<tr>
-								<td colspan="3" style="position: relative;">{{> loading}}</td>
+							<tr class="table-loading">
+								<td class="table-loading-td" colspan="3">{{> loading}}</td>
 							</tr>
 						{{/if}}
 					</tbody>