prefetch phrases and then render filter component instead of redrawing the table

public/js/components/Messages/Details/TableMessages.js

@@ -30,6 +30,7 @@ export default {
 			personId: null,
 			layoutColumnsOnNewData:	false,
 			height: '400',
+			arePhrasesLoaded: false
 		}
 	},
 	methods: {
@@ -305,9 +306,6 @@ export default {
 				{
 					event: 'tableBuilt',
 					handler: async() => {
-						await this.$p.loadCategory(['global', 'person', 'stv', 'messages', 'ui', 'notiz']);
-
-						this.$refs.table.tabulator.redraw(true); //for immediate translation of status
 						const setHeader = (field, text) => {
 							const col = this.$refs.table.tabulator.getColumn(field);
 							if (!col) return;
@@ -358,6 +356,12 @@ export default {
 				});*/
 	},
 	created(){
+		this.$p
+			.loadCategory(['global', 'person', 'stv', 'messages', 'ui', 'notiz'])
+			.then(() => {
+				this.arePhrasesLoaded = true;
+			});
+
 		if(this.typeId != 'person_id' && Array.isArray(this.id) && this.id.length === 1) {
 			const params = {
 				id: this.id,
@@ -382,6 +386,7 @@ export default {
 				<!--table-->
 				<div class="col-sm-6 pt-1">
 					<core-filter-cmpt
+						v-if="arePhrasesLoaded"
 						ref="table"
 						:tabulator-options="tabulatorOptions"
 						:tabulator-events="tabulatorEvents"
@@ -414,6 +419,7 @@ export default {
 				<div class="col-sm-12 pt-6">
 					<core-filter-cmpt
 						ref="table"
+						v-if="arePhrasesLoaded"
 						:tabulator-options="tabulatorOptions"
 						:tabulator-events="tabulatorEvents"
 						table-only