From a1fc6ef6e72291d768ede11c88f2ae6960262e72 Mon Sep 17 00:00:00 2001
From: imohkay <karen.menezes@gmail.com>
Date: Tue, 22 Jan 2019 16:33:36 +0530
Subject: [PATCH] aspect ratio for thumbnails, loading behaviour

---
 package.json                    |  2 +-
 src/components/Loading.js       | 13 +++++++++++++
 src/containers/Results.js       | 23 +++++++++++++++--------
 src/reducers/search.js          |  4 ++--
 src/stylesheets/loading.scss    | 24 ++++++++++++++++++++++++
 src/stylesheets/style.scss      |  1 +
 src/stylesheets/variables.scss  |  1 +
 src/stylesheets/video-item.scss |  1 +
 8 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Loading.js
 create mode 100644 src/stylesheets/loading.scss

diff --git a/package.json b/package.json
index 967f7dc..e4ca2ad 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Loading.js b/src/components/Loading.js
new file mode 100644
index 0000000..eebe140
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/containers/Results.js b/src/containers/Results.js
index 9f76bf2..99a63f8 100644
--- a/src/containers/Results.js
+++ b/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 (
-      <Grid className="random-topics"
-            width={220}
-            gap={12}>
-        {this.props.searchResults && this.props.searchResults.map(video =>
-          <VideoItem id={video.id} key={video.id} title={video.title}/>
-        )}
-      </Grid>
+      <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 => ({
diff --git a/src/reducers/search.js b/src/reducers/search.js
index 79c8f77..0d3deeb 100644
--- a/src/reducers/search.js
+++ b/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
       });
 
diff --git a/src/stylesheets/loading.scss b/src/stylesheets/loading.scss
new file mode 100644
index 0000000..adf6421
--- /dev/null
+++ b/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);
+			}
+		}
+	}
+}
diff --git a/src/stylesheets/style.scss b/src/stylesheets/style.scss
index 02dab66..d99098c 100644
--- a/src/stylesheets/style.scss
+++ b/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";
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index eae3262..3776fee 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -1,2 +1,3 @@
+$dark-gray-color: #777;
 $light-gray-color: #eaeaea;
 $normal-link-color: blue;
\ No newline at end of file
diff --git a/src/stylesheets/video-item.scss b/src/stylesheets/video-item.scss
index b699a0a..78bc187 100644
--- a/src/stylesheets/video-item.scss
+++ b/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;
 }