Fix spinner

Author: MartinBraquet

app/complete-profile/page.tsx

@@ -11,7 +11,6 @@ import PromptAnswer from '@/components/ui/PromptAnswer';
 
 import imageCompression from 'browser-image-compression';
 import {Item} from '@/lib/client/schema';
-import LoadingSpinner from "@/lib/client/LoadingSpinner";
 import {fetchFeatures} from "@/lib/client/fetching";
 
 
@@ -203,7 +202,12 @@ function RegisterComponent() {
   }, [showDropdown]);
 
   if (isLoading) {
-    return <LoadingSpinner/>
+    return (
+      <div className="flex justify-center min-h-screen py-8">
+        <div data-testid="spinner"
+             className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+      </div>
+    )
   }
 
   const handleImagesUpload = async (e: ChangeEvent<HTMLInputElement>) => {

app/profiles/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from "next/link";
-import {useCallback, useEffect, useState} from "react";
+import React, {useCallback, useEffect, useState} from "react";
 import LoadingSpinner from "@/lib/client/LoadingSpinner";
 import {DropdownKey, ProfileData} from "@/lib/client/schema";
 import {dropdownConfig, ProfileFilters} from "./ProfileFilters";
@@ -219,7 +219,9 @@ export default function ProfilePage() {
           <div className="flex-1">
             {loading ? (
               <div className="flex justify-center py-8">
-                <LoadingSpinner/>
+                  <div className="flex justify-center min-h-screen py-8">
+                  <div data-testid="spinner" className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+                  </div>
               </div>
             ) : error ? (
               <div className="flex justify-center py-2">

lib/client/LoadingSpinner.tsx

@@ -1,3 +1,5 @@
+// For som unknown reasons, the spinner does not render when using LoadingSpinner(), so I copy paste the div block everywhere (TODO)
+
 export default function LoadingSpinner() {
   return (
     <div className="flex justify-center min-h-screen py-8">

lib/client/profile.tsx

@@ -2,9 +2,8 @@
 
 import Image from "next/image";
 import {pStyle} from "@/lib/client/constants";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {parseImage} from "@/lib/client/media";
-import LoadingSpinner from "@/lib/client/LoadingSpinner";
 import {useRouter} from 'next/navigation';
 
 interface DeleteProfileButtonProps {
@@ -98,7 +97,12 @@ export function Profile(url: string, header: any = null) {
   }, [url]);
 
   if (loading) {
-    return <LoadingSpinner/>;
+    return (
+      <div className="flex justify-center min-h-screen py-8">
+        <div data-testid="spinner"
+             className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+      </div>
+    )
   }
 
   if (!userData) {
@@ -161,18 +165,18 @@ export function Profile(url: string, header: any = null) {
                   <div className="flex-1">
                     <div className="h-32 w-32 rounded-full border-4 border-white overflow-hidden ">
                       <a href={image} target="_blank" rel="noopener noreferrer">
-                      <Image
-                        src={image}
-                        alt={userData.name || 'Profile picture'}
-                        className="h-full w-full object-cover"
-                        width={200}
-                        height={200}
-                        // onError={(e) => {
-                        //   const target = e.target as HTMLImageElement;
-                        //   target.onerror = null;
-                        //   target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(profile.name || 'U')}&background=random`;
-                        // }}
-                      />
+                        <Image
+                          src={image}
+                          alt={userData.name || 'Profile picture'}
+                          className="h-full w-full object-cover"
+                          width={200}
+                          height={200}
+                          // onError={(e) => {
+                          //   const target = e.target as HTMLImageElement;
+                          //   target.onerror = null;
+                          //   target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(profile.name || 'U')}&background=random`;
+                          // }}
+                        />
                       </a>
                     </div>
                   </div>