adding animation to extra-info title, and mild restructure

app/assets/javascripts/discourse/templates/header.hbs

@@ -95,9 +95,7 @@
     {{#if showExtraInfo}}
       <div class="extra-info-wrapper">
         <div {{bind-attr class=":extra-info topic.category.isUncategorizedCategory::has-category"}}>
-          {{#if showStarButton}}
-            <a {{bind-attr class=":star topic.starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
-          {{/if}}
+
           <div class="title-wrapper">
             <h1>
               {{#if showPrivateMessageGlyph}}
@@ -105,13 +103,16 @@
               {{/if}}
 
               {{#if topic.details.loaded}}
+                {{#if showStarButton}}
+                  <a {{bind-attr class=":star topic.starred:starred"}} {{action "toggleStar"}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
+                {{/if}}
                 {{topic-status topic=topic}}
                 <a class='topic-link' href='{{unbound topic.url}}' {{action "jumpToTopPost"}}>{{{topic.fancy_title}}}</a>
               {{else}}
                 {{#if topic.errorLoading}}
-                  {{topic.errorTitle}}
+                  <span class="error">{{topic.errorTitle}}</span>
                 {{else}}
-                  {{i18n topic.loading}}
+                  <span class="loading">{{i18n topic.loading}}</span>
                 {{/if}}
               {{/if}}
             </h1>

app/assets/stylesheets/desktop/topic-post.scss

@@ -522,9 +522,24 @@ iframe {
   max-width: 100%;
 }
 
+@keyframes fadein {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+@-webkit-keyframes fadein {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
 .extra-info-wrapper {
   overflow: hidden;
 
+.star, .badge-wrapper, i,  .topic-link:not(.loading) {
+  -webkit-animation: fadein .7s;
+  animation-duration: .7s;
+  animation-name: fadein;
+}
+
   .topic-statuses {
     i  { color: $header_primary; }
     i.fa-envelope { color: $danger; }
@@ -549,8 +564,8 @@ iframe {
   }
 
   a.star {
-    margin: 6px 7px 20px 0;
-    font-size: 20px;
+    margin: 0 7px 20px 2px;
+    font-size: 17px;
     color: dark-light-diff($secondary, $primary, 80%, -20%) !important;
   }
   a.star.starred {color: $danger !important;}
@@ -583,9 +598,6 @@ iframe {
     line-height: 1.1em;
     margin: 0 0 2px 0;
   }
-  .star {
-    margin-top: 3px;
-  }
 }