loading ticket screen layout reference

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -743,4 +743,15 @@ class LocalModalRef extends App.ControllerContent
 
 App.Config.set( 'layout_ref/local_modal', LocalModalRef, 'Routes' )
 
+class loadingPlaceholderRef extends App.ControllerContent
+
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+    @html App.view('layout_ref/loading_placeholder')()
+
+App.Config.set( 'layout_ref/loading_placeholder', loadingPlaceholderRef, 'Routes' )
+
 App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

app/assets/javascripts/app/views/layout_ref/index.jst.eco

@@ -20,6 +20,7 @@
     <li><a href="#layout_ref/setup">Setup Wizard</a></li>
     <li><a href="#layout_ref/richtext">Richtext</a></li>
     <li><a href="#layout_ref/local_modal">Local Modal</a></li>
+    <li><a href="#layout_ref/loading_placeholder">Loading Placeholder</a></li>
   </ul>
 
 </div>

app/assets/javascripts/app/views/layout_ref/loading_placeholder.jst.eco

@@ -0,0 +1,3 @@
+<div class="flex loadingPlaceholder">
+  <div class="loading icon"></div><h2>Loading Ticket</h2>
+</div>

app/assets/stylesheets/zammad.css.scss

@@ -766,6 +766,18 @@ textarea,
     z-index: 1;
   }
 
+.loadingPlaceholder {
+  @extend .centered;
+  
+  .icon {
+    margin: -5px 14px 0 0;
+  }
+
+  h2 {
+    margin: 0;
+  }
+}
+
 .form-stacked .checkbox label {
   color: inherit;
   font-size: 13px;
@@ -774,7 +786,6 @@ textarea,
   letter-spacing: inherit;
 }
 
-
 .pagination {
   margin: 0;
 }