From 5e67914d7d336e2f4fe6699414a593de13d1c78c Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 4 Mar 2024 14:13:40 +0000
Subject: [PATCH] UI Updates

---
 src/components/GenerateRoadmap/GenerateRoadmap.tsx |  4 ----
 src/components/GenerateRoadmap/RoadmapSearch.tsx   | 10 +++++++++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/GenerateRoadmap/GenerateRoadmap.tsx b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
index 9da07761a..bf10742d9 100644
--- a/src/components/GenerateRoadmap/GenerateRoadmap.tsx
+++ b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
@@ -177,8 +177,6 @@ export function GenerateRoadmap() {
   };
 
   const loadAIRoadmapLimit = async () => {
-    pageProgressMessage.set('Loading Roadmap Limit');
-
     const { response, error } = await httpGet<{
       limit: number;
       used: number;
@@ -192,8 +190,6 @@ export function GenerateRoadmap() {
     const { limit, used } = response;
     setRoadmapLimit(limit);
     setRoadmapLimitUsed(used);
-
-    pageProgressMessage.set('');
   };
 
   const loadAIRoadmap = async (roadmapId: string) => {
diff --git a/src/components/GenerateRoadmap/RoadmapSearch.tsx b/src/components/GenerateRoadmap/RoadmapSearch.tsx
index f34718f68..1ae3d92a3 100644
--- a/src/components/GenerateRoadmap/RoadmapSearch.tsx
+++ b/src/components/GenerateRoadmap/RoadmapSearch.tsx
@@ -2,6 +2,7 @@ import { Wand } from 'lucide-react';
 import type { FormEvent } from 'react';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
+import { cn } from '../../lib/classname.ts';
 
 type RoadmapSearchProps = {
   roadmapTopic: string;
@@ -50,7 +51,14 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
       <div className="mb-36">
         <p className="text-gray-500">
           You have generated{' '}
-          <span className="text-gray-800">
+          <span
+            className={cn(
+              'inline-block border w-[50px] text-sm rounded-md text-center tabular-nums text-gray-800',
+              {
+                'bg-zinc-300 text-zinc-300 border-zinc-300 animate-pulse': !limit,
+              },
+            )}
+          >
             {limitUsed} of {limit}
           </span>{' '}
           roadmaps today.