Paginate y SearchPlaceholder

src/components/Paginate.jsx

@@ -143,14 +143,14 @@ export default class Paginate extends Component {
             if (page === LEFT_PAGE) return (
                 <li key={page} className="page-item">
                     <a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
-                        <span>&laquo; Anterior</span>
+                        <span>&laquo;</span>
                     </a>
                 </li>
             );
             if (page === RIGHT_PAGE) return (
                 <li key={page} className="page-item">
                     <a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
-                        <span>Siguiente &raquo;</span>
+                        <span>&raquo;</span>
                     </a>
                 </li>
             );

src/components/Search.jsx

@@ -7,6 +7,11 @@ import Paginate from "./Paginate";
 import {Link} from "react-router-dom";
 import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
+const SearchPlaceholder = () => (
+    <Fragment>
+        {[...Array(10)].map((e, i) => <li key={i} className='entity'/>)}
+    </Fragment>
+)
 
 class SearchArtist extends React.Component {
     render() {
@@ -32,8 +37,13 @@ class SearchArtists extends React.Component {
 
     componentDidUpdate = (prevProps, prevState) => {
         if(prevProps.query !== this.props.query || prevState.page !== this.state.page) {
-            this.setState({artists: null, paginate: null})
             this.loadArtists(this.props.query, this.state.page)
+
+            if(prevState.page !== this.state.page){
+                this.setState({artists: null})
+            }else{
+                this.setState({artists: null, paginate: null})
+            }
         }
     };
 
@@ -48,7 +58,6 @@ class SearchArtists extends React.Component {
         page = page ? page : 1;
 
         searchArtist(query, page).then((response) => {
-            console.log(response);
             this.setState({
                 artists: response.artists,
                 paginate: response.paginate
@@ -57,7 +66,7 @@ class SearchArtists extends React.Component {
     };
 
     render = () => {
-        let artists = <p>Cargando...</p>;
+        let artists = <SearchPlaceholder/>;
         if(this.state.artists) {
            artists = this.state.artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>);
         }

src/styles/main.css

@@ -61,7 +61,7 @@ h1, h2, h3, h4 {
 }
 
 .nav .branding {
-   margin: 0;
+    margin: 0;
 }
 
 .nav-links {
@@ -89,6 +89,12 @@ ul.pagination {
     padding: 0 1rem;
 }
 
+@media (max-width: 767px) {
+    .page-link {
+        padding: 0 .4rem;
+    }
+}
+
 .page-item.active {
     background-color: var(--accent);
 }