From 37e5a1a51ea6c4810216789c20a65785e50c83af Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Thu, 18 Jun 2020 21:53:48 +0200
Subject: [PATCH] added a loading animation to the video previews

---
 src/elements/Preview/Preview.css |  9 +++++++++
 src/elements/Preview/Preview.js  | 10 +++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/elements/Preview/Preview.css b/src/elements/Preview/Preview.css
index 60c36f2..3db50f6 100644
--- a/src/elements/Preview/Preview.css
+++ b/src/elements/Preview/Preview.css
@@ -8,8 +8,17 @@
 }
 
 .previewpic {
+    min-width: 266px;
+    min-height: 150px;
     height: 80%;
     overflow: hidden;
+    text-align: center;
+}
+
+.loadAnimation {
+    display: inline-block;
+    line-height: 150px;
+    vertical-align: center;
 }
 
 .previewimage {
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index dd89694..77cbf4e 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -2,6 +2,7 @@ import React from "react";
 import "./Preview.css";
 import Player from "../../pages/Player/Player";
 import VideoContainer from "../VideoContainer/VideoContainer";
+import {Spinner} from "react-bootstrap";
 
 class Preview extends React.Component {
     constructor(props, context) {
@@ -42,9 +43,12 @@ class Preview extends React.Component {
             <div className='videopreview' onClick={() => this.itemClick()}>
                 <div className='previewtitle'>{this.state.name}</div>
                 <div className='previewpic'>
-                    <img className='previewimage'
-                         src={this.state.previewpicture}
-                         alt='Pic loading.'/>
+                    {this.state.previewpicture != null ?
+                        <img className='previewimage'
+                             src={this.state.previewpicture}
+                             alt='Pic loading.'/> :
+                        <span className='loadAnimation'><Spinner animation="border"/></span>}
+
                 </div>
                 <div className='previewbottom'>