I have recently start working on a Spring MVC project where for the frontend I purchased an AngularJs & Bootstrap template. Integration and configuration went fine but now that I managed to bring some data on the frontend and I've noticed some page loading visual issues which happens only when I try to click the menu buttons and therefore navigate from one view to another. Below I have attached 2 screenshots which are showing the left menu with the 2 buttons "Contacts" and "Manage Groups".
Assuming that I am on the "Contacts" page and I click on the "Manage Groups" button (or the other way around) when page is loading the grid with the groups or contacts data, for a fraction of a second I can see some of the validation msg and Angularjs expressions, after that the page loads as normal with no errors or such.
I've also tested on other browsers, like Firefox and Explorer but the page is loading as normal. It seems that this problem it only happens when I use chrome. any idea how I can fix this?
Sample Code
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
<div ng-class="{'text-left': displayCreateContactButton == true, 'none': displayCreateContactButton == false}">
<a ng-href="#addContactsModal"
role="button"
ng-click="resetContact();"
title="<spring:message code='create'/> <spring:message code='contact'/>"
class="btn btn-primary"
data-toggle="modal">
<i class="icon-plus"></i>
<spring:message code="create"/> <spring:message code="contact"/>
</a>
</div>
</div>
<div class="col-md-6">
<p class="text-right" style="font-size:1.6em; margin-bottom:0"> Search <spring:message code='contacts.header'/> |
<a ng-href="#searchContactsModal"
id="contactsHeaderButton"
role="button"
ng-class="{'': displaySearchButton == true, 'none': displaySearchButton == false}"
title="<spring:message code="search"/> <spring:message code="contact"/>"
class="btn btn-sm btn-primary" data-toggle="modal">
<em class="icon-magnifier"></em>
</a></p>
</div>
</div>
</div>
<div class="panel-body">
<div ng-class="{'alert alert-success alert-dismissible fade in': displaySearchMessage == true, 'none': displaySearchMessage == false}">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong><i class="fa fa-info-circle"></i> {{page.searchMessage}}</strong>
<a role="button"
ng-click="resetSearch();"
ng-class="{'': displaySearchMessage == true, 'none': displaySearchMessage == false}"
title="<spring:message code='search.reset'/>"
class="btn btn-default" data-toggle="modal">
<i class="icon-remove"></i> <spring:message code="search.reset"/>
</a>
</div>
<div role="alert" ng-class="{'alert alert-success alert-dismissible fade in': displayMessageToUser == true, 'none': displayMessageToUser == false}">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong><i class="fa fa-info-circle"></i> {{page.actionMessage}}!</strong>.
</div>
<div ng-class="{'alert alert-block alert-error': state == 'error', 'none': state != 'error'}">
<h4><i class="fa fa-info-circle"></i> <spring:message code="error.generic.header"/></h4><br/>
<p><spring:message code="error.generic.text"/></p>
</div>
<div ng-class="{'alert alert-info': state == 'noresult', 'none': state != 'noresult'}">
<h4><i class="fa fa-info-circle"></i> <spring:message code="contacts.emptyData"/></h4><br/>
<p><spring:message code="contacts.emptyData.text"/></p>
</div>
<div id="gridContainer" ng-class="{'': state == 'list', 'none': state != 'list'}">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th scope="col"><spring:message code="contacts.name"/></th>
<th scope="col"><spring:message code="contacts.email"/></th>
<th scope="col"><spring:message code="contacts.phone"/></th>
<th style="text-align:center" scope="col">#Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in page.source">
<td class="tdContactsCentered">{{contact.name}}</td>
<td class="tdContactsCentered">{{contact.email}}</td>
<td class="tdContactsCentered">{{contact.phoneNumber}}</td>
<td class="width15">
<div class="text-center">
<input type="hidden" value="{{contact.id}}"/>
<a ng-href="#updateContactsModal"
ng-click="selectedContact(contact);"
role="button"
title="<spring:message code="update"/> <spring:message code="contact"/>"
class="btn btn-sm btn-warning" data-toggle="modal">
<i class="icon-pencil"></i>
</a>
<a ng-href="#deleteContactsModal"
ng-click="selectedContact(contact);"
role="button"
title="<spring:message code="delete"/> <spring:message code="contact"/>"
class="btn btn-sm btn-danger" data-toggle="modal">
<em class="fa fa-trash"></em>
</a>
</div>
</td>
</tr>
</tbody>
</table>
