aspect ratio for thumbnails, loading behaviour

package.json

@@ -14,7 +14,7 @@
     "react-redux": "^5.1.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.1",
+    "react-scripts": "^2.1.3",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",

src/components/Loading.js

@@ -0,0 +1,13 @@
+import React from 'react';
+class Loading extends React.Component{
+	render(){
+	  return(
+	   <div className="loading">
+	   	<span></span>
+	   	<span></span>
+	   	<span></span>
+	   </div>
+	  )
+	}
+}
+export default Loading;

src/containers/Results.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Grid from "react-css-grid";
+import Loading from "../components/Loading";
 import VideoItem from "../components/VideoItem";
 import PropTypes from "prop-types";
 import {getSearchResults} from "../actions/search";
@@ -19,13 +20,18 @@ class Results extends React.Component {
   render() {
     // console.log('results', this.props.searchResults);
     return (
+      <div>
         <Grid className="random-topics"
               width={220}
               gap={12}>
+          {this.props.loadingResults && (
+            <Loading />
+          )}
           {this.props.searchResults && this.props.searchResults.map(video =>
             <VideoItem id={video.id} key={video.id} title={video.title}/>
           )}
         </Grid>
+      </div>
     );
   }
 }
@@ -34,7 +40,8 @@ const mapStateToProps = state => ({
   searchResults: state.results.currentItems,
   currentKey: state.results.currentKey,
   currentValue: state.results.currentValue,
-  currentQuery: state.results.queryParams
+  currentQuery: state.results.queryParams,
+  loadingResults: state.results.loadingResults
 });
 
 const mapDispatchToProps = dispatch => ({

src/reducers/search.js

@@ -7,11 +7,11 @@ export default function(state={}, action) {
   switch (action.type) {
 
     case START_LOADING_ALL_RESULTS:
-      return Object.assign({}, state, { loadingAllTopics: true });
+      return Object.assign({}, state, { loadingResults: true });
 
     case LOADED_ALL_RESULTS:
       return Object.assign({}, state, {
-        loadingAllTopics: false,
+        loadingResults: false,
         currentItems: action.payload
       });
 

src/stylesheets/loading.scss

@@ -0,0 +1,24 @@
+@import "variables";
+/* loader */
+.loading {
+	span {
+		background: $dark-gray-color;
+		border-radius: 50%;
+		margin: 2em 0.2em;
+		width: 12px;
+		height: 12px;
+		display: inline-block;
+		scale: 1;
+		animation: loading-animation 2s linear infinite forwards;
+
+		@keyframes loading-animation {
+			50% {
+			  transform: scale(1.2);
+			}
+
+			100% {
+			  transform: scale(1);
+			}
+		}
+	}
+}

src/stylesheets/style.scss

@@ -4,6 +4,7 @@
 @import "nav";
 @import "search";
 @import "random-item";
+@import "loading";
 @import "video-item";
 @import "video-player";
 @import "footer";

src/stylesheets/variables.scss

@@ -1,2 +1,3 @@
+$dark-gray-color: #777;
 $light-gray-color: #eaeaea;
 $normal-link-color: blue;

src/stylesheets/video-item.scss

@@ -12,6 +12,7 @@
 .video-thumbnail {
   width: 100%;
   max-height: 150px;
+  object-fit: cover;
   transition: all .4s ease-in-out;
 }