Updated timeline_queue_button_header

fixes: #27
put queue header in dom but hide if no count
if count, animate in so it doesn't jump the feed

app/javascript/gabsocial/components/timeline_queue_button_header.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { shortNumberFormat } from '../utils/numbers';
+import classNames from 'classnames';
 
 export default class TimelineQueueButtonHeader extends React.PureComponent {
   static propTypes = {
@@ -18,19 +19,21 @@ export default class TimelineQueueButtonHeader extends React.PureComponent {
   render () {
     const { count, itemType, onClick } = this.props;
 
-    if (count <= 0) return null;
+    const classes = classNames('timeline-queue-header', {
+      'hidden': (count <= 0)
+    });
 
     return (
-      <div className='timeline-queue-header'>
+      <div className={classes}>
         <a className='timeline-queue-header__btn' onClick={onClick}>
-          <FormattedMessage
+          {(count > 0) && <FormattedMessage
             id='timeline_queue.label'
             defaultMessage='Click to see {count} new {type}'
             values={{
               count: shortNumberFormat(count),
               type: count == 1 ? itemType : `${itemType}s`,
             }}
-          />
+          />}
         </a>
       </div>
     );

app/javascript/styles/gabsocial/components.scss

@@ -5108,21 +5108,31 @@ noscript {
 .timeline-queue-header {
 	display: block;
 	width: 100%;
-	height: 52px;
+	max-height: 46px;
 	position: relative;
 	background-color: darken($ui-base-color, 8%);
 	border-bottom: 1px solid;
 	border-top: 1px solid;
 	border-color: darken($ui-base-color, 4%);
+	transition: max-height 2.5s ease;
+	overflow: hidden;
+
+	&.hidden {
+		max-height: 0px;
+	}
 
 	&__btn {
 		display: block;
 		width: 100%;
 		height: 100%;
 		text-align: center;
-		line-height: 52px;
+		line-height: 46px;
 		font-size: 14px;
 		cursor: pointer;
 		color: $secondary-text-color;
+
+		span {
+			height: 46px;
+		}
 	}
 }