Pulsating effect mientras carga elemento

TODO.md

@@ -1 +1,2 @@
 Searchbar tendria que hacer callback de la query que se ejecuto, no ejecutarla el mismo
+Si es que se hace click en el link actio del paginate, se borran los resultados y no se ven

src/components/Search.jsx

@@ -9,11 +9,14 @@ import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 
-const SearchPlaceholder = (props) => (
+const SearchPlaceholder = (props) => {
-    <Fragment>
+    const className = props.className + ' pulsating';
-        {[...Array(10)].map((e, i) => <li key={i} className={props.className}/>)}
+    return (
-    </Fragment>
+        <Fragment>
-)
+            {[...Array(10)].map((e, i) => <li key={i} className={className}/>)}
+        </Fragment>
+    )
+}
 
 class SearchSong extends React.Component {
     render() {
@@ -97,10 +100,10 @@ class SearchSongs extends React.Component {
 
 class SearchDisc extends React.Component {
     getReleaseYear = (release) => {
-       const releaseDate = new Date(release);
+        const releaseDate = new Date(release);
-       return (
+        return (
-           <span className='release-date'>{releaseDate.getFullYear()}</span>
+            <span className='release-date'>{releaseDate.getFullYear()}</span>
-       )
+        )
     }
 
     render() {

src/styles/main.scss

@@ -222,3 +222,22 @@ ul.tabs li.tab.selected {
 .full-width {
   width: 100%;
 }
+
+.pulsating {
+  animation: pulsating 8s infinite;
+
+  @keyframes pulsating {
+    0% {
+      background-color: var(--white);
+    }
+
+    50% {
+      background-color: var(--gray-1);
+    }
+
+    100% {
+      background-color: var(--white);
+    }
+  }
+}
+