diff --git a/TODO.md b/TODO.md index f227626..975df63 100644 --- a/TODO.md +++ b/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 diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 3cf0456..aea23f5 100644 --- a/src/components/Search.jsx +++ b/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) => ( - - {[...Array(10)].map((e, i) =>
  • )} - -) +const SearchPlaceholder = (props) => { + const className = props.className + ' pulsating'; + return ( + + {[...Array(10)].map((e, i) =>
  • )} + + ) +} 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); - return ( - {releaseDate.getFullYear()} - ) + const releaseDate = new Date(release); + return ( + {releaseDate.getFullYear()} + ) } render() { diff --git a/src/styles/main.scss b/src/styles/main.scss index 556d51d..8a6d148 100644 --- a/src/styles/main.scss +++ b/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); + } + } +} +