Make loading messages visible

bounswe · Dec 16, 2024 · 80dce92 · 80dce92
1 parent a7bc926
commit 80dce92
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 7 deletions.
diff --git a/frontend/src/components/FullscreenLoading.tsx b/frontend/src/components/FullscreenLoading.tsx
@@ -26,7 +26,11 @@ export const FullscreenLoading = ({
       <Loader2
         className="h-16 w-16 animate-spin text-primary"
       />
-      <span className="sr-only">Loading</span>
+      {!takingLong && (
+        <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+          Loading...
+        </div>
+      )}
       {takingLong && (
         <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
           This is taking a while...

diff --git a/frontend/src/components/SearchQuestionsList.tsx b/frontend/src/components/SearchQuestionsList.tsx
@@ -104,7 +104,9 @@ export const SearchQuestionsList = () => {
             <Loader2
               className="h-16 w-16 animate-spin text-primary"
             />
-            <span className="sr-only">Loading</span>
+            <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+              Loading...
+            </div>
           </div>
         )}
       </div>

diff --git a/frontend/src/components/SearchTagsList.tsx b/frontend/src/components/SearchTagsList.tsx
@@ -83,7 +83,9 @@ export const SearchTagsList = () => {
             <Loader2
               className="h-16 w-16 animate-spin text-primary"
             />
-            <span className="sr-only">Loading</span>
+            <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+              Loading...
+            </div>
           </div>
         )}
       </div>

diff --git a/frontend/src/components/Tags.tsx b/frontend/src/components/Tags.tsx
@@ -90,7 +90,9 @@ export default function TagsPage() {
               <Loader2
                 className="h-16 w-16 animate-spin text-primary"
               />
-              <span className="sr-only">Loading</span>
+              <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+                Loading...
+              </div>
             </div>
           )}
         </div>

diff --git a/frontend/src/routes/bookmarks.tsx b/frontend/src/routes/bookmarks.tsx
@@ -92,7 +92,9 @@ export const BookmarkedQuestions = () => {
             <Loader2
               className="h-16 w-16 animate-spin text-primary"
             />
-            <span className="sr-only">Loading</span>
+            <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+              Loading...
+            </div>
           </div>
         )}
       </div>

diff --git a/frontend/src/routes/profile.test.tsx b/frontend/src/routes/profile.test.tsx
@@ -53,7 +53,7 @@ describe("Profile component", () => {
 
     render(<RouterProvider router={router} />);
 
-    expect(screen.getByLabelText(/loading/i)).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
   });
 
   it("displays user data correctly", async () => {

diff --git a/frontend/src/routes/search.test.tsx b/frontend/src/routes/search.test.tsx
@@ -55,7 +55,7 @@ describe("Search component", () => {
       </MemoryRouter>,
     );
 
-    expect(screen.getByLabelText(/loading/i)).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
   });
 
   it("renders tags correctly", () => {