Skip to content

Commit c3179a1

Browse files
adding animation to spin in profile view
1 parent abae5fa commit c3179a1

File tree

2 files changed

+19
-8
lines changed

2 files changed

+19
-8
lines changed

Diff for: src/components/ui/tooltip.astro

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
const { text, id } = Astro.props;
3+
---
4+
5+
<div
6+
id={id}
7+
role="tooltip"
8+
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
9+
>
10+
{text}
11+
<div class="tooltip-arrow" data-popper-arrow></div>
12+
</div>

Diff for: src/pages/perfil.astro

+7-8
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import BaseLayout from "../layouts/baseLayout.astro";
33
import categories from "../data/profileCategories.json";
44
import Toast from "../components/toast/toast.astro";
55
import CardLink from "../components/forms/cardLink.astro";
6+
import Tooltip from "../components/ui/tooltip.astro";
67
import "../styles/main.css";
78
89
let categoriesList = [];
@@ -114,14 +115,7 @@ for (const key in categories) {
114115
</div>
115116
</div>
116117

117-
<div
118-
id="tooltip-reload"
119-
role="tooltip"
120-
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
121-
>
122-
Recargar datos
123-
<div class="tooltip-arrow" data-popper-arrow></div>
124-
</div>
118+
<Tooltip id="tooltip-reload" text="Recargar datos" />
125119

126120
<div
127121
data-popover
@@ -466,13 +460,18 @@ for (const key in categories) {
466460
}
467461

468462
function disableInput() {
463+
document.getElementById("reloadGithubData").setAttribute("disabled", "");
464+
document.getElementById("reloadGithubData").classList.add("animate-spin");
469465
document.getElementById("loadUserBtn").setAttribute("disabled", "");
470466
document.getElementById("spinner-ico").classList.remove("hidden");
471467
document.getElementById("spinner-ico").classList.add("inline");
472468
document.getElementById("github-ico").classList.add("hidden");
469+
473470
}
474471

475472
function enableInput() {
473+
document.getElementById("reloadGithubData").removeAttribute("disabled");
474+
document.getElementById("reloadGithubData").classList.remove("animate-spin");
476475
document.getElementById("loadUserBtn").removeAttribute("disabled");
477476
document.getElementById("spinner-ico").classList.add("hidden");
478477
document.getElementById("spinner-ico").classList.remove("inline");

0 commit comments

Comments
 (0)