added refresh button placeholder (#436)

* added refresh button placeholder * added alt tag spinner
redxzeta · Oct 2, 2022 · e435386 · e435386
1 parent 2ab5c7b
commit e435386
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -11,6 +11,7 @@ import { randomPetsList } from "../../routes/API";
 import { fetcher } from "../../utils/homePageFetcher";
 import LoadPlaceHolder from "../shared/PlaceHolderCard";
 import "./home.css";
+import load from "./loding.png";
 
 export default function Home() {
   return (
@@ -54,6 +55,9 @@ const LoadingPetCards = () => {
           <LoadPlaceHolder />
           <LoadPlaceHolder />
         </PetCardFlex>{" "}
+        <Button color="primary">
+          <img className="rotate" src={load} alt="spinner" />
+        </Button>
       </PawHubContainer>
     );
   if (error || !petList)

diff --git a/src/components/home/home.css b/src/components/home/home.css
@@ -4,3 +4,15 @@
 .home__background {
   background: url("./homehero.png");
 }
+.rotate {
+  animation: rotation 1.3s infinite linear;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
diff --git a/src/components/home/loding.png b/src/components/home/loding.png