feat: ✨ add loading indicator

by Sivritkin Dmitriy

1@@ -8,9 +8,9 @@ Explore your Git commit history with ease! `GitHubCommitExplorer` is a sleek, re
2 
3 ## Features 🌟
4 
5-- **Real-Time Updates**: Timestamps update live, without needing to refresh the page.
6-- **User-Friendly Interface**: Built with Tailwind for a responsive, intuitive design.
7-- **Refresh Button**: Fetch the latest commits without reloading the page, complete with a smooth loading indicator.
8+- ✅ **User-Friendly Interface**: Built with Tailwind for a responsive, intuitive design.
9+- ✅ **Refresh Button**: Fetch the latest commits without reloading the page, complete with a smooth loading indicator.
10+- ✅ **View Code Changes**: Explore changes in the code for each commit, providing an understanding of what was modified, added, or removed. 
11 ---
12 - ⚡ [Next.js](https://nextjs.org) with App Router support
13 - 🔥 Type checking [TypeScript](https://www.typescriptlang.org)@@ -1,5 +1,6 @@
14 "use client";
15 
16+import { RotateCw } from "lucide-react";
17 import { useFormState, useFormStatus } from "react-dom";
18 import { refreshCommits } from "~/app/actions";
19 import { Button } from "~/shared/ui/button";
20@@ -23,7 +24,13 @@ const RefrButton = () => {
21 
22   return (
23     <Button type="submit" disabled={formStatus.pending}>
24-      Refresh
25+      {formStatus.pending ? (
26+        <span className="flex items-center gap-2">
27+          <RotateCw className="size-5 animate-spin" /> Loading...
28+        </span>
29+      ) : (
30+        <span>Refresh</span>
31+      )}
32     </Button>
33   );
34 };