[Aider] Add a loading screen in the first User count screen

.github/workflows/pr-auto-commit.yml

@@ -0,0 +1,39 @@
+name: Vercel Kickstart
+
+on:
+  pull_request:
+    types:
+      - synchronize
+      - opened
+
+jobs:
+  commit_as_user:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout PR branch
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Git with the target user info
+        env:
+          GIT_USER_NAME: ${{ secrets.GIT_USER_NAME }}
+          GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }}
+        run: |
+          git config user.name "$GIT_USER_NAME"
+          git config user.email "$GIT_USER_EMAIL"
+
+      - name: Update timestamp.txt with current time
+        run: |
+          echo "Last updated: $(date)" > timestamp.txt
+          git add timestamp.txt
+          git commit -m "Vercel Magic 🪄 - Update timestamp.txt with latest date"
+
+      - name: Push as CMNisal
+        env:
+          GITHUB_TOKEN: ${{ secrets.USER_PAT }} # The PAT of the target user
+          PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
+        run: |
+          git push --force-with-lease origin HEAD:$PR_HEAD_REF

src/components/usercount.tsx

@@ -7,18 +7,31 @@ import { useStore } from "@/lib/store";
 
 export default function UserCount() {
     const { count, setCount } = useStore();
+export default function UserCount() {
+    const { count, setCount, isLoading, setLoading } = useStore();
 
     useEffect(() => {
         async function fetchUserCount() {
+            setLoading(true);
             const data = await fetchy.get<any>("/api/user");
             console.log(data.count);
             setCount((data.count as number) || 80);
+            setLoading(false);
         }
         fetchUserCount();
     }, []);
 
+    if (isLoading) {
+        return (
+            <div className="flex justify-center items-center h-screen">
+                <Progress />
+            </div>
+        );
+    }
+
     // Array to maintain tier maximum counts
     const tierMaxCounts = [100, 200, 500, 1000, 2500, 5000, 10000];
+    // ... rest of the component
 
     // Function to calculate progress based on the entire range (0 to 100%)
     const getProgressValue = (count: number): number => {

src/lib/store.ts

@@ -2,14 +2,18 @@ import { create } from "zustand";
 
 export type Store = {
     count: number;
+    isLoading: boolean;
     setCount: (count: number) => void;
+    setLoading: (loading: boolean) => void;
     userID: string;
     setUserID: (userID: string) => void;
 };
 
 export const useStore = create<Store>((set) => ({
     count: 0,
+    isLoading: true,
     setCount: (count: number) => set({ count }),
+    setLoading: (loading: boolean) => set({ isLoading: loading }),
     userID: "",
     setUserID: (userID: string) => set({ userID }),
 }));

timestamp.txt

@@ -0,0 +1 @@
+Last updated: Tue Oct  1 22:26:35 UTC 2024