Improved Loading UI/UX

Author: alexvcasillas

examples/github-repos-demo/src/components/loading-card/loading-card.jsx

@@ -1,7 +1,10 @@
 import styled from 'styled-components';
 
+import UserPlaceholder from './loading-user-bg.jpg';
+import RepoPlaceholder from './loading-repo-bg.jpg';
+
 const LoadingCard = styled.div`
-  width: 33.33%;
+  width: ${props => (props.userPlaceholder ? '100%' : '33.33%')};
   padding: 20px;
 
   @media (max-width: 375px){
@@ -14,7 +17,11 @@ const LoadingCard = styled.div`
 
   > .content{
     display: flex;
-    padding: 20px;
+    background-image: ${props => (props.userPlaceholder ? `url(${UserPlaceholder})` : `url(${RepoPlaceholder})`)};
+    background-position: ${props => (props.userPlaceholder ? `left center` : `url(${RepoPlaceholder})`)};
+    background-repeat: no-repeat;
+    background-size: contains;
+    min-height: ${props => (props.userPlaceholder ? `200px` : `250px`)};
     background-color: #ffffff;
     box-shadow: 0 0 20px rgba(0,0,0,0.1);
     flex-direction: column;

examples/github-repos-demo/src/components/loading-card/loading-repo-bg.jpg

@@ -1,7 +1,6 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';
 
-import Language from '../language/language';
 import UserCard from '../user-card/user-card';
 import RepoCard from '../repo-card/repo-card';
 import LoadingCard from '../loading-card/loading-card';
@@ -11,9 +10,10 @@ import './stylesheets/repos-grid.scss';
 const ReposGrid = ({ github }) => (
   <div id="ReposGrid">
     {github.fetchingData
-      ? <LoadingCard>
-          <div className="content"><Language resource="FETCHING_DATA" /></div>
-        </LoadingCard>
+      ? <div style={{ width: '100%' }}>
+          <LoadingCard userPlaceholder><div className="content" /></LoadingCard>
+          <LoadingCard repoPlaceholder><div className="content" /></LoadingCard>
+        </div>
       : null}
     {!github.fetchingData && github.user
       ? <UserCard user={github.user} />

examples/github-repos-demo/src/components/loading-card/loading-user-bg.jpg

@@ -12,6 +12,9 @@ const SearchUser = ({ github }) => (
         onChange={event => {
           github.changeUserToSearchFor(event.target.value);
         }}
+        onKeyPress={event => {
+          if (event.charCode === 13) github.searchForUser();
+        }}
         type="text"
         placeholder="Github username to find repositories"
       />

examples/github-repos-demo/src/components/repos-grid/repos-grid.jsx

@@ -15,7 +15,7 @@ export default class GithubStore {
   }
 
   async fetchFromGithub(endpoint) {
-    const url = `https://api.github.com${endpoint}?client_id=62b5dd81cbcb92f3cdf9&client_secret=1c41dfda0d56eb31b722049aa60d91eafeb6ebcf`;
+    const url = `https://api.github.com${endpoint}?client_id=my_client_id&client_secret=my_secret_id`;
     const response = await fetch(url);
     return await response.json();
   }