added a loading animation to the video previews
This commit is contained in:
		@@ -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 {
 | 
			
		||||
 
 | 
			
		||||
@@ -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'>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user