From 76d4a9ad1c111da10f3c06f3950e406209892f2a Mon Sep 17 00:00:00 2001
From: Greg Ross <greg@toolstack.com>
Date: Tue, 10 Jul 2018 02:32:44 -0400
Subject: [PATCH] Add ng-cloak support. (#256)

* Add ng-cloak support.

So that the template items aren't displayed until they are required.

* Additional ng-cloak class.
---
 css/style.css      | 3 +++
 templates/main.php | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 43b0c52..049cde2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -261,3 +261,6 @@ label {
 	margin: 88px auto;
 }
 
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+	display: none !important;
+}
\ No newline at end of file
diff --git a/templates/main.php b/templates/main.php
index 04587e0..68af6b4 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -11,7 +11,7 @@ use \OCA\OcSms\Lib\CountryCodes;
 	<div id="app-mailbox-peers">
 		<div id="app-contacts-loader" class="icon-loading" ng-show="isContactsLoading">
 		</div>
-		<ul class="contact-list" ng-show="!isContactsLoading">
+		<ul class="ng-cloak contact-list" ng-show="!isContactsLoading">
 			<li ng-repeat="contact in contacts | orderBy:vsettings.contactOrderBy:vsettings.reverseContactOrder" peer-label="{{ contact.label }}" ng-click="loadConversation(contact);" href="#">
 				<img class="ocsms-plavatar" ng-src="{{ contact.avatar }}" ng-show="contact.avatar !== undefined" />
 				<div class="ocsms-plavatar" ng-show="contact.avatar === undefined" ng-style="{'background-color': (contact.uid | peerColor)}">{{ contact.label | firstCharacter }}</div>
@@ -61,9 +61,9 @@ use \OCA\OcSms\Lib\CountryCodes;
 	</div>
 
 	<div id="ocsms-app-content">
-		<div id="app-content-loader" class="icon-loading" ng-show="isConvLoading">
+		<div id="app-content-loader" class="ng-cloak icon-loading" ng-show="isConvLoading">
 		</div>
-		<div id="app-content-header" ng-show="!isConvLoading && selectedContact.label !== undefined && selectedContact.label !== ''"
+		<div id="app-content-header" class="ng-cloak" ng-show="!isConvLoading && selectedContact.label !== undefined && selectedContact.label !== ''"
 			 ng-style="{'background-color': (selectedContact.uid | peerColor)}">
 			<div id="ocsms-contact-avatar">
 				<img class="ocsms-plavatar-big" ng-show="selectedContact.avatar !== undefined" ng-src="{{ selectedContact.avatar }}" />
@@ -81,7 +81,7 @@ use \OCA\OcSms\Lib\CountryCodes;
 		</div>
 		<div id="app-content-wrapper" ng-show="!isConvLoading">
 			<div ng-show="messages.length == 0" id="ocsms-empty-conversation"><?php p($l->t('Please select a conversation from the list to load it.'));?></div>
-			<div ng-show="messages.length > 0" class="ocsms-messages-container">
+			<div ng-show="messages.length > 0" class="ng-cloak ocsms-messages-container">
 				<div ng-repeat="message in messages | orderBy:'date'">
 					<div class="msg-{{ message.type }}">
 						<div>{{ message.content }}</div>