From b3948d6df9027242216779c17854f7e1c460386d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Crhemy-arc=E2=80=9D?= <“rhemaadzer@gmail.com”>
Date: Mon, 24 Aug 2026 10:37:11 +0100
Subject: [PATCH 1/8] feat(animations): add reusable loading components

Add LoadingSpinner, Skeleton, CredentialSkeleton, and LoadingButton
components to the animations module. These provide consistent loading
indicators across the application with proper accessibility support.
---
 frontend/src/components/animations/index.ts   |  3 +
 .../components/animations/loading-button.tsx  | 61 ++++++++++++
 .../components/animations/loading-spinner.tsx | 32 +++++++
 .../src/components/animations/skeleton.tsx    | 93 +++++++++++++++++++
 4 files changed, 189 insertions(+)
 create mode 100644 frontend/src/components/animations/loading-button.tsx
 create mode 100644 frontend/src/components/animations/loading-spinner.tsx
 create mode 100644 frontend/src/components/animations/skeleton.tsx

diff --git a/frontend/src/components/animations/index.ts b/frontend/src/components/animations/index.ts
index fad15d1f..374bfd7c 100644
--- a/frontend/src/components/animations/index.ts
+++ b/frontend/src/components/animations/index.ts
@@ -3,4 +3,7 @@ export { AnimatedProgress } from './animated-progress';
 export { ConfettiBurst } from './confetti-burst';
 export { AnimatedIcon, SuccessPulse } from './animated-icon';
 export { SuccessOverlay, SuccessToast } from './success-overlay';
+export { LoadingSpinner } from './loading-spinner';
+export { Skeleton, CredentialSkeleton } from './skeleton';
+export { LoadingButton } from './loading-button';
 export type { SuccessVariant } from './success-overlay';
diff --git a/frontend/src/components/animations/loading-button.tsx b/frontend/src/components/animations/loading-button.tsx
new file mode 100644
index 00000000..eaeae9e0
--- /dev/null
+++ b/frontend/src/components/animations/loading-button.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+
+interface LoadingButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isLoading?: boolean;
+  loadingText?: string;
+  variant?: 'primary' | 'secondary' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const variantClasses = {
+  primary: 'bg-green-600 hover:bg-green-700 active:bg-green-800 text-white',
+  secondary: 'bg-white/10 hover:bg-white/20 active:bg-white/30 text-white',
+  danger: 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white',
+};
+
+const sizeClasses = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2',
+  lg: 'px-6 py-3 text-lg',
+};
+
+export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
+  ({ isLoading = false, loadingText, variant = 'primary', size = 'md', disabled, children, className = '', ...props }, ref) => {
+    const isDisabled = disabled || isLoading;
+
+    return (
+      <motion.button
+        ref={ref}
+        disabled={isDisabled}
+        className={`
+          rounded-lg font-medium transition-colors flex items-center justify-center gap-2
+          touch-manipulation disabled:opacity-50 disabled:cursor-not-allowed
+          ${variantClasses[variant]}
+          ${sizeClasses[size]}
+          ${className}
+        `}
+        whileHover={isDisabled ? {} : { scale: 1.02 }}
+        whileTap={isDisabled ? {} : { scale: 0.98 }}
+        aria-busy={isLoading}
+        aria-disabled={isDisabled}
+        {...props}
+      >
+        {isLoading && (
+          <motion.div
+            animate={{ rotate: 360 }}
+            transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+          >
+            <Loader2 className="w-4 h-4" />
+          </motion.div>
+        )}
+        {isLoading ? loadingText || children : children}
+      </motion.button>
+    );
+  }
+);
+
+LoadingButton.displayName = 'LoadingButton';
diff --git a/frontend/src/components/animations/loading-spinner.tsx b/frontend/src/components/animations/loading-spinner.tsx
new file mode 100644
index 00000000..cdaae99c
--- /dev/null
+++ b/frontend/src/components/animations/loading-spinner.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  label?: string;
+  className?: string;
+}
+
+const sizeMap = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+};
+
+export function LoadingSpinner({ size = 'md', label, className = '' }: LoadingSpinnerProps) {
+  return (
+    <div className={`flex items-center gap-2 ${className}`} role="status" aria-label={label || 'Loading'}>
+      <motion.div
+        animate={{ rotate: 360 }}
+        transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+      >
+        <Loader2 className={`${sizeMap[size]} text-green-400`} />
+      </motion.div>
+      {label && (
+        <span className="text-sm text-green-200">{label}</span>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/animations/skeleton.tsx b/frontend/src/components/animations/skeleton.tsx
new file mode 100644
index 00000000..d244f319
--- /dev/null
+++ b/frontend/src/components/animations/skeleton.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+interface SkeletonProps {
+  className?: string;
+  variant?: 'text' | 'circular' | 'rectangular';
+  width?: string | number;
+  height?: string | number;
+  lines?: number;
+}
+
+export function Skeleton({
+  className = '',
+  variant = 'text',
+  width,
+  height,
+  lines = 1,
+}: SkeletonProps) {
+  const baseClasses = 'bg-white/10 animate-pulse';
+
+  const variantClasses = {
+    text: 'rounded',
+    circular: 'rounded-full',
+    rectangular: 'rounded-lg',
+  };
+
+  if (variant === 'text' && lines > 1) {
+    return (
+      <div className={`space-y-2 ${className}`} role="status" aria-label="Loading content">
+        {Array.from({ length: lines }).map((_, i) => (
+          <motion.div
+            key={i}
+            className={`${baseClasses} ${variantClasses[variant]}`}
+            style={{
+              width: i === lines - 1 ? '75%' : width || '100%',
+              height: height || '1rem',
+            }}
+            initial={{ opacity: 0.5 }}
+            animate={{ opacity: [0.5, 1, 0.5] }}
+            transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.1 }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className={`${baseClasses} ${variantClasses[variant]} ${className}`}
+      style={{ width, height }}
+      role="status"
+      aria-label="Loading content"
+      initial={{ opacity: 0.5 }}
+      animate={{ opacity: [0.5, 1, 0.5] }}
+      transition={{ duration: 1.5, repeat: Infinity }}
+    />
+  );
+}
+
+interface CredentialSkeletonProps {
+  count?: number;
+  className?: string;
+}
+
+export function CredentialSkeleton({ count = 3, className = '' }: CredentialSkeletonProps) {
+  return (
+    <div className={`space-y-3 ${className}`} role="status" aria-label="Loading credentials">
+      {Array.from({ length: count }).map((_, i) => (
+        <motion.div
+          key={i}
+          className="bg-white/10 rounded-lg p-4 flex items-center justify-between"
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: i * 0.1 }}
+        >
+          <div className="flex items-center gap-4">
+            <Skeleton variant="circular" width={32} height={32} />
+            <div className="space-y-2">
+              <Skeleton width={120} height={16} />
+              <Skeleton width={80} height={12} />
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Skeleton variant="circular" width={24} height={24} />
+            <Skeleton variant="circular" width={24} height={24} />
+            <Skeleton variant="circular" width={24} height={24} />
+          </div>
+        </motion.div>
+      ))}
+    </div>
+  );
+}

From fd880f625619bf9c3dff1052b0844b9246df2182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Crhemy-arc=E2=80=9D?= <“rhemaadzer@gmail.com”>
Date: Mon, 24 Aug 2026 10:37:19 +0100
Subject: [PATCH 2/8] feat(credentials): add loading states to edit modal

Integrate LoadingButton and useCredentialOperation hook into the
credential edit modal. Form inputs are now disabled during save
operations, and error messages are displayed if the save fails.
---
 .../src/components/credential-edit-modal.tsx  | 57 ++++++++++++++-----
 1 file changed, 44 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/credential-edit-modal.tsx b/frontend/src/components/credential-edit-modal.tsx
index a0773ab9..b7de85cc 100644
--- a/frontend/src/components/credential-edit-modal.tsx
+++ b/frontend/src/components/credential-edit-modal.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Edit2, CheckCircle } from 'lucide-react';
+import { LoadingButton } from './animations';
+import { useCredentialOperation } from '@/hooks/useCredentialOperation';
 
 interface Credential {
   id: string;
@@ -26,25 +28,33 @@ export function CredentialEditModal({
 }: CredentialEditModalProps) {
   const [vaccineType, setVaccineType] = useState('');
   const [vaccinationDate, setVaccinationDate] = useState('');
+  const { execute, isPending, error, clearError } = useCredentialOperation();
 
   useEffect(() => {
     if (credential && isOpen) {
       setVaccineType(credential.vaccineType);
       setVaccinationDate(credential.vaccinationDate);
+      clearError();
     }
-  }, [credential, isOpen]);
+  }, [credential, isOpen, clearError]);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
-    if (credential) {
+    if (!credential) return;
+
+    await execute(async () => {
+      // Simulate API call delay
+      await new Promise((resolve) => setTimeout(resolve, 1000));
       onSave({
         ...credential,
         vaccineType,
         vaccinationDate,
       });
       onClose();
-    }
-  };
+    }, {
+      context: 'CredentialEdit',
+    });
+  }, [credential, vaccineType, vaccinationDate, execute, onSave, onClose]);
 
   if (!credential) return null;
 
@@ -90,7 +100,8 @@ export function CredentialEditModal({
                   type="text"
                   value={vaccineType}
                   onChange={(e) => setVaccineType(e.target.value)}
-                  className="w-full bg-white/10 border border-white/20 rounded p-3 sm:p-2 text-white outline-none focus:border-green-400 text-base sm:text-sm"
+                  disabled={isPending}
+                  className="w-full bg-white/10 border border-white/20 rounded p-3 sm:p-2 text-white outline-none focus:border-green-400 disabled:opacity-50 text-base sm:text-sm"
                   required
                 />
               </div>
@@ -100,26 +111,46 @@ export function CredentialEditModal({
                   type="text"
                   value={vaccinationDate}
                   onChange={(e) => setVaccinationDate(e.target.value)}
-                  className="w-full bg-white/10 border border-white/20 rounded p-3 sm:p-2 text-white outline-none focus:border-green-400 text-base sm:text-sm"
+                  disabled={isPending}
+                  className="w-full bg-white/10 border border-white/20 rounded p-3 sm:p-2 text-white outline-none focus:border-green-400 disabled:opacity-50 text-base sm:text-sm"
                   required
                 />
               </div>
-              
+
+              {/* Error message */}
+              <AnimatePresence>
+                {error && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 text-red-200 text-sm"
+                    role="alert"
+                  >
+                    {error}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
               <div className="flex flex-col sm:flex-row justify-end pt-3 sm:pt-4 gap-2 sm:gap-3">
                 <button
                   type="button"
                   onClick={onClose}
-                  className="px-4 py-3 sm:py-2 bg-white/10 text-white rounded hover:bg-white/20 transition-colors touch-manipulation order-2 sm:order-1"
+                  disabled={isPending}
+                  className="px-4 py-3 sm:py-2 bg-white/10 text-white rounded hover:bg-white/20 transition-colors disabled:opacity-50 touch-manipulation order-2 sm:order-1"
                 >
                   Cancel
                 </button>
-                <button
+                <LoadingButton
                   type="submit"
-                  className="px-4 py-3 sm:py-2 bg-green-500 text-white rounded hover:bg-green-600 active:bg-green-700 transition-colors flex items-center justify-center gap-2 touch-manipulation order-1 sm:order-2"
+                  isLoading={isPending}
+                  loadingText="Saving..."
+                  variant="primary"
+                  className="order-1 sm:order-2"
                 >
                   <CheckCircle className="w-4 h-4" />
                   Save Changes
-                </button>
+                </LoadingButton>
               </div>
             </form>
           </motion.div>

From 1ffc2976bdadaba265252422640b8750477cacc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Crhemy-arc=E2=80=9D?= <“rhemaadzer@gmail.com”>
Date: Mon, 24 Aug 2026 10:37:27 +0100
Subject: [PATCH 3/8] feat(credentials): add skeleton loading to details modal

Show skeleton placeholders while credential details are loading.
The skeleton mimics the layout of the actual content for a smooth
visual transition when data appears.
---
 .../components/credential-details-modal.tsx   | 92 ++++++++++++++-----
 1 file changed, 70 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/credential-details-modal.tsx b/frontend/src/components/credential-details-modal.tsx
index afb84aeb..674d9999 100644
--- a/frontend/src/components/credential-details-modal.tsx
+++ b/frontend/src/components/credential-details-modal.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Shield, Calendar } from 'lucide-react';
+import { Skeleton } from './animations';
 
 interface Credential {
   id: string;
@@ -16,11 +18,48 @@ interface CredentialDetailsModalProps {
   onClose: () => void;
 }
 
+function CredentialDetailsSkeleton() {
+  return (
+    <div className="space-y-3 sm:space-y-4" role="status" aria-label="Loading credential details">
+      <div>
+        <Skeleton width={80} height={12} className="mb-2" />
+        <Skeleton width={180} height={24} />
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+        <div>
+          <Skeleton width={50} height={12} className="mb-2" />
+          <Skeleton width={70} height={16} />
+        </div>
+        <div>
+          <Skeleton width={40} height={12} className="mb-2" />
+          <Skeleton width={100} height={16} />
+        </div>
+      </div>
+      <div>
+        <Skeleton width={90} height={12} className="mb-2" />
+        <Skeleton variant="rectangular" width="100%" height={40} />
+      </div>
+    </div>
+  );
+}
+
 export function CredentialDetailsModal({
   isOpen,
   credential,
   onClose,
 }: CredentialDetailsModalProps) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (isOpen && credential) {
+      setIsLoading(true);
+      // Simulate loading delay for demonstration
+      const timer = setTimeout(() => setIsLoading(false), 800);
+      return () => clearTimeout(timer);
+    }
+    setIsLoading(true);
+  }, [isOpen, credential]);
+
   if (!credential) return null;
 
   return (
@@ -58,34 +97,43 @@ export function CredentialDetailsModal({
               <Shield className="w-5 h-5 sm:w-6 sm:h-6 text-green-400" />
               <h3 className="text-lg sm:text-xl font-bold text-white">Credential Details</h3>
             </div>
-            
-            <div className="space-y-3 sm:space-y-4">
-              <div>
-                <label className="text-xs sm:text-sm text-gray-400">Vaccine Type</label>
-                <div className="text-white font-medium text-base sm:text-lg">{credential.vaccineType}</div>
-              </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+
+            {isLoading ? (
+              <CredentialDetailsSkeleton />
+            ) : (
+              <motion.div
+                className="space-y-3 sm:space-y-4"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3 }}
+              >
                 <div>
-                  <label className="text-xs sm:text-sm text-gray-400">Status</label>
-                  <div className={`font-medium ${credential.verificationStatus ? 'text-green-400' : 'text-yellow-400'}`}>
-                    {credential.verificationStatus ? 'Verified' : 'Pending'}
+                  <label className="text-xs sm:text-sm text-gray-400">Vaccine Type</label>
+                  <div className="text-white font-medium text-base sm:text-lg">{credential.vaccineType}</div>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+                  <div>
+                    <label className="text-xs sm:text-sm text-gray-400">Status</label>
+                    <div className={`font-medium ${credential.verificationStatus ? 'text-green-400' : 'text-yellow-400'}`}>
+                      {credential.verificationStatus ? 'Verified' : 'Pending'}
+                    </div>
+                  </div>
+                  <div>
+                    <label className="text-xs sm:text-sm text-gray-400">Date</label>
+                    <div className="text-white flex items-center gap-2">
+                      <Calendar className="w-4 h-4 text-gray-400" />
+                      {credential.vaccinationDate}
+                    </div>
                   </div>
                 </div>
                 <div>
-                  <label className="text-xs sm:text-sm text-gray-400">Date</label>
-                  <div className="text-white flex items-center gap-2">
-                    <Calendar className="w-4 h-4 text-gray-400" />
-                    {credential.vaccinationDate}
+                  <label className="text-xs sm:text-sm text-gray-400">Credential ID</label>
+                  <div className="text-gray-300 font-mono text-xs sm:text-sm break-all bg-white/5 p-2 rounded">
+                    {credential.id}
                   </div>
                 </div>
-              </div>
-              <div>
-                <label className="text-xs sm:text-sm text-gray-400">Credential ID</label>
-                <div className="text-gray-300 font-mono text-xs sm:text-sm break-all bg-white/5 p-2 rounded">
-                  {credential.id}
-                </div>
-              </div>
-            </div>
+              </motion.div>
+            )}
           </motion.div>
         </motion.div>
       )}

From 19bbdae98700d7e42816542485cde23eeff2b1d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Crhemy-arc=E2=80=9D?= <“rhemaadzer@gmail.com”>
Date: Mon, 24 Aug 2026 10:37:36 +0100
Subject: [PATCH 4/8] feat(credentials): enhance deletion modal with progress

Add animated progress bar during credential deletion, improved
spinner animation, and better visual feedback for all deletion
states (idle, deleting, deleted, failed, undoable).
---
 .../deletion-confirmation-modal.tsx           | 81 ++++++++++++++++---
 1 file changed, 69 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/deletion-confirmation-modal.tsx b/frontend/src/components/deletion-confirmation-modal.tsx
index 70d7ad11..d50ca9f9 100644
--- a/frontend/src/components/deletion-confirmation-modal.tsx
+++ b/frontend/src/components/deletion-confirmation-modal.tsx
@@ -2,8 +2,9 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { AlertTriangle, Shield, Clock, CheckCircle, XCircle, Undo2 } from 'lucide-react';
+import { AlertTriangle, Shield, Clock, CheckCircle, XCircle, Undo2, Loader2 } from 'lucide-react';
 import { useAccessibility } from '@/contexts/AccessibilityContext';
+import { AnimatedProgress } from './animations';
 
 interface Credential {
   id: string;
@@ -31,6 +32,7 @@ export function DeletionConfirmationModal({
 }: DeletionConfirmationModalProps) {
   const [confirmationText, setConfirmationText] = useState('');
   const [undoCountdown, setUndoCountdown] = useState(10);
+  const [deleteProgress, setDeleteProgress] = useState(0);
   const { announceToScreenReader } = useAccessibility();
 
   const isConfirmEnabled = confirmationText === 'DELETE';
@@ -39,10 +41,30 @@ export function DeletionConfirmationModal({
     if (isOpen) {
       setConfirmationText('');
       setUndoCountdown(10);
+      setDeleteProgress(0);
       announceToScreenReader('Deletion confirmation dialog opened');
     }
   }, [isOpen, announceToScreenReader]);
 
+  // Simulate deletion progress
+  useEffect(() => {
+    if (deletionStatus === 'deleting') {
+      const stages = [
+        { progress: 25, delay: 300 },
+        { progress: 50, delay: 600 },
+        { progress: 75, delay: 900 },
+        { progress: 100, delay: 1200 },
+      ];
+
+      const timers = stages.map(({ progress, delay }) =>
+        setTimeout(() => setDeleteProgress(progress), delay)
+      );
+
+      return () => timers.forEach(clearTimeout);
+    }
+    setDeleteProgress(0);
+  }, [deletionStatus]);
+
   useEffect(() => {
     if (deletionStatus === 'undoable' && undoCountdown > 0) {
       const timer = setTimeout(() => {
@@ -169,19 +191,34 @@ export function DeletionConfirmationModal({
 
             {/* Deletion status */}
             {deletionStatus === 'deleting' && (
-              <div className="mb-3 sm:mb-4 p-3 sm:p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <Clock className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-400 animate-spin" />
+              <motion.div
+                className="mb-3 sm:mb-4 p-3 sm:p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg"
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: 'auto' }}
+                exit={{ opacity: 0, height: 0 }}
+              >
+                <div className="flex items-center gap-3 mb-3">
+                  <motion.div
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+                  >
+                    <Loader2 className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-400" />
+                  </motion.div>
                   <div>
                     <p className="text-white font-medium text-sm sm:text-base">Deleting credential...</p>
                     <p className="text-xs sm:text-sm text-gray-400">Please wait while we process your request</p>
                   </div>
                 </div>
-              </div>
+                <AnimatedProgress progress={deleteProgress} label="Removing from IPFS and blockchain" />
+              </motion.div>
             )}
 
             {deletionStatus === 'deleted' && (
-              <div className="mb-3 sm:mb-4 p-3 sm:p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
+              <motion.div
+                className="mb-3 sm:mb-4 p-3 sm:p-4 bg-red-500/10 border border-red-500/30 rounded-lg"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+              >
                 <div className="flex items-center gap-3">
                   <CheckCircle className="w-4 h-4 sm:w-5 sm:h-5 text-red-400" />
                   <div>
@@ -189,19 +226,24 @@ export function DeletionConfirmationModal({
                     <p className="text-xs sm:text-sm text-gray-400">The credential has been permanently removed</p>
                   </div>
                 </div>
-              </div>
+              </motion.div>
             )}
 
             {deletionStatus === 'failed' && (
-              <div className="mb-3 sm:mb-4 p-3 sm:p-4 bg-orange-500/10 border border-orange-500/30 rounded-lg">
+              <motion.div
+                className="mb-3 sm:mb-4 p-3 sm:p-4 bg-orange-500/10 border border-orange-500/30 rounded-lg"
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                role="alert"
+              >
                 <div className="flex items-center gap-3">
                   <XCircle className="w-4 h-4 sm:w-5 sm:h-5 text-orange-400" />
                   <div>
                     <p className="text-white font-medium text-sm sm:text-base">Deletion failed</p>
-                    <p className="text-xs sm:text-sm text-gray-400">An error occurred while deleting the credential</p>
+                    <p className="text-xs sm:text-sm text-gray-400">An error occurred while deleting the credential. Please try again.</p>
                   </div>
                 </div>
-              </div>
+              </motion.div>
             )}
 
             {deletionStatus === 'undoable' && (
@@ -254,7 +296,7 @@ export function DeletionConfirmationModal({
                   >
                     Cancel
                   </button>
-                  <button
+                  <motion.button
                     onClick={onConfirm}
                     disabled={!isConfirmEnabled}
                     className={`px-4 py-3 sm:py-2 rounded-lg transition-colors flex items-center justify-center gap-2 touch-manipulation order-1 sm:order-none ${
@@ -262,11 +304,26 @@ export function DeletionConfirmationModal({
                         ? 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white'
                         : 'bg-gray-600 text-gray-400 cursor-not-allowed'
                     }`}
+                    whileHover={isConfirmEnabled ? { scale: 1.02 } : {}}
+                    whileTap={isConfirmEnabled ? { scale: 0.98 } : {}}
                   >
                     <XCircle className="w-4 h-4" />
                     Delete Permanently
-                  </button>
+                  </motion.button>
                 </>
+              ) : deletionStatus === 'deleting' ? (
+                <button
+                  disabled
+                  className="px-4 py-3 sm:py-2 bg-gray-600 text-gray-400 rounded-lg cursor-not-allowed flex items-center justify-center gap-2 touch-manipulation"
+                >
+                  <motion.div
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+                  >
+                    <Loader2 className="w-4 h-4" />
+                  </motion.div>
+                  Deleting...
+                </button>
               ) : (
                 <button
                   onClick={onCancel}

From 62f69ff6f0f7638373aaccda1d6888273f498502 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Crhemy-arc=E2=80=9D?= <“rhemaadzer@gmail.com”>
Date: Mon, 24 Aug 2026 10:37:46 +0100
Subject: [PATCH 5/8] feat(verification): add loading states to verification
 center

Add skeleton loading for stats cards and verification list during
initial data fetch. Include a refresh button with loading spinner
for manual data refresh.
---
 .../vaccination-verification-center.tsx       | 266 +++++++++++-------
 1 file changed, 166 insertions(+), 100 deletions(-)

diff --git a/frontend/src/components/vaccination-verification-center.tsx b/frontend/src/components/vaccination-verification-center.tsx
index d702c73f..aadab738 100644
--- a/frontend/src/components/vaccination-verification-center.tsx
+++ b/frontend/src/components/vaccination-verification-center.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useState } from 'react';
-import { CheckCircle, XCircle, Clock, AlertCircle, Shield } from 'lucide-react';
+import { useState, useEffect, useCallback } from 'react';
+import { CheckCircle, XCircle, Clock, AlertCircle, Shield, RefreshCw } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { AnimatedIcon, SuccessPulse } from './animations';
+import { AnimatedIcon, SuccessPulse, LoadingSpinner, CredentialSkeleton } from './animations';
 
 interface VaccinationVerificationCenterProps {
   walletAddress: string;
@@ -17,11 +17,30 @@ interface Verification {
 }
 
 export function VaccinationVerificationCenter({ walletAddress }: VaccinationVerificationCenterProps) {
-  const [verifications] = useState<Verification[]>([
-    { id: '1', vaccineType: 'COVID-19 (Pfizer)', status: 'approved', createdAt: '2026-07-15' },
-    { id: '2', vaccineType: 'Influenza 2025', status: 'pending', createdAt: '2026-07-18' },
-    { id: '3', vaccineType: 'Hepatitis B', status: 'rejected', createdAt: '2026-07-10' },
-  ]);
+  const [verifications, setVerifications] = useState<Verification[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  // Simulate initial data fetch
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVerifications([
+        { id: '1', vaccineType: 'COVID-19 (Pfizer)', status: 'approved', createdAt: '2026-07-15' },
+        { id: '2', vaccineType: 'Influenza 2025', status: 'pending', createdAt: '2026-07-18' },
+        { id: '3', vaccineType: 'Hepatitis B', status: 'rejected', createdAt: '2026-07-10' },
+      ]);
+      setIsLoading(false);
+    }, 1200);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleRefresh = useCallback(async () => {
+    setIsRefreshing(true);
+    // Simulate refresh
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    setIsRefreshing(false);
+  }, []);
 
   const stats = {
     approved: verifications.filter((v) => v.status === 'approved').length,
@@ -68,114 +87,161 @@ export function VaccinationVerificationCenter({ walletAddress }: VaccinationVeri
 
   return (
     <div role="region" aria-labelledby="verification-heading">
-      <h2 id="verification-heading" className="text-2xl font-bold text-white mb-6">
-        Vaccination Verification Center
-      </h2>
-
-      {/* Stats cards */}
-      <div className="grid grid-cols-3 gap-4 mb-6" role="group" aria-label="Verification statistics">
-        {[
-          { count: stats.approved, label: 'Verified', bg: 'bg-green-500/20', color: 'text-green-400' },
-          { count: stats.pending, label: 'Pending', bg: 'bg-yellow-500/20', color: 'text-yellow-400' },
-          { count: stats.rejected, label: 'Rejected', bg: 'bg-red-500/20', color: 'text-red-400' },
-        ].map((stat, i) => (
+      <div className="flex items-center justify-between mb-6">
+        <h2 id="verification-heading" className="text-2xl font-bold text-white">
+          Vaccination Verification Center
+        </h2>
+        <motion.button
+          onClick={handleRefresh}
+          disabled={isLoading || isRefreshing}
+          className="p-2 text-green-400 hover:text-green-300 transition-colors disabled:opacity-50"
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.9 }}
+          aria-label="Refresh verifications"
+        >
           <motion.div
-            key={stat.label}
-            className={`${stat.bg} rounded-lg p-4 text-center`}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: i * 0.1, type: 'spring', stiffness: 300, damping: 25 }}
-            whileHover={{ scale: 1.03 }}
-            role="status"
-            aria-label={`${stat.count} ${stat.label} verifications`}
+            animate={isRefreshing ? { rotate: 360 } : {}}
+            transition={isRefreshing ? { duration: 1, repeat: Infinity, ease: 'linear' } : {}}
           >
-            <motion.div
-              className={`text-3xl font-bold ${stat.color}`}
-              key={stat.count}
-              initial={{ scale: 0.5 }}
-              animate={{ scale: 1 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 20 }}
-              aria-hidden="true"
-            >
-              {stat.count}
-            </motion.div>
-            <div className={`${stat.color} text-sm opacity-80`}>{stat.label}</div>
+            <RefreshCw className="w-5 h-5" />
           </motion.div>
-        ))}
+        </motion.button>
       </div>
 
-      {/* Verification list */}
-      <div className="space-y-4" role="list" aria-label="Verification requests">
-        <AnimatePresence mode="popLayout">
-          {verifications.length === 0 ? (
+      {/* Stats cards */}
+      {isLoading ? (
+        <div className="grid grid-cols-3 gap-4 mb-6" role="status" aria-label="Loading statistics">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="bg-white/10 rounded-lg p-4 text-center animate-pulse">
+              <div className="h-8 bg-white/20 rounded mb-2 mx-auto w-12" />
+              <div className="h-4 bg-white/20 rounded mx-auto w-16" />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-3 gap-4 mb-6" role="group" aria-label="Verification statistics">
+          {[
+            { count: stats.approved, label: 'Verified', bg: 'bg-green-500/20', color: 'text-green-400' },
+            { count: stats.pending, label: 'Pending', bg: 'bg-yellow-500/20', color: 'text-yellow-400' },
+            { count: stats.rejected, label: 'Rejected', bg: 'bg-red-500/20', color: 'text-red-400' },
+          ].map((stat, i) => (
             <motion.div
-              key="empty"
-              className="text-center py-8 text-green-200"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
+              key={stat.label}
+              className={`${stat.bg} rounded-lg p-4 text-center`}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: i * 0.1, type: 'spring', stiffness: 300, damping: 25 }}
+              whileHover={{ scale: 1.03 }}
               role="status"
+              aria-label={`${stat.count} ${stat.label} verifications`}
             >
-              <Shield className="w-12 h-12 mx-auto mb-4 opacity-50" aria-hidden="true" />
-              <p>No vaccination verifications yet</p>
+              <motion.div
+                className={`text-3xl font-bold ${stat.color}`}
+                key={stat.count}
+                initial={{ scale: 0.5 }}
+                animate={{ scale: 1 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 20 }}
+                aria-hidden="true"
+              >
+                {stat.count}
+              </motion.div>
+              <div className={`${stat.color} text-sm opacity-80`}>{stat.label}</div>
             </motion.div>
-          ) : (
-            verifications.map((verification, index) => {
-              const config = getStatusConfig(verification.status);
-              return (
-                <motion.div
-                  key={verification.id}
-                  className="bg-white/10 rounded-lg p-4 flex items-center justify-between"
-                  initial={{ opacity: 0, x: -20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  exit={{ opacity: 0, x: 20 }}
-                  transition={{
-                    delay: index * 0.08,
-                    type: 'spring',
-                    stiffness: 300,
-                    damping: 25,
-                  }}
-                  layout
-                  role="listitem"
-                  aria-label={`${verification.vaccineType}, status: ${config.label}, submitted: ${new Date(verification.createdAt).toLocaleDateString()}`}
-                >
-                  <div className="flex items-center gap-4">
-                    {config.pulse ? (
-                      <SuccessPulse>
+          ))}
+        </div>
+      )}
+
+      {/* Verification list */}
+      <div className="space-y-4" role="list" aria-label="Verification requests">
+        {isLoading ? (
+          <CredentialSkeleton count={3} />
+        ) : (
+          <AnimatePresence mode="popLayout">
+            {verifications.length === 0 ? (
+              <motion.div
+                key="empty"
+                className="text-center py-8 text-green-200"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                role="status"
+              >
+                <Shield className="w-12 h-12 mx-auto mb-4 opacity-50" aria-hidden="true" />
+                <p>No vaccination verifications yet</p>
+              </motion.div>
+            ) : (
+              verifications.map((verification, index) => {
+                const config = getStatusConfig(verification.status);
+                return (
+                  <motion.div
+                    key={verification.id}
+                    className="bg-white/10 rounded-lg p-4 flex items-center justify-between"
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: 20 }}
+                    transition={{
+                      delay: index * 0.08,
+                      type: 'spring',
+                      stiffness: 300,
+                      damping: 25,
+                    }}
+                    layout
+                    role="listitem"
+                    aria-label={`${verification.vaccineType}, status: ${config.label}, submitted: ${new Date(verification.createdAt).toLocaleDateString()}`}
+                  >
+                    <div className="flex items-center gap-4">
+                      {config.pulse ? (
+                        <SuccessPulse>
+                          <AnimatedIcon
+                            icon={config.icon}
+                            size={20}
+                            color="currentColor"
+                            className={config.color}
+                          />
+                        </SuccessPulse>
+                      ) : (
                         <AnimatedIcon
                           icon={config.icon}
                           size={20}
                           color="currentColor"
                           className={config.color}
                         />
-                      </SuccessPulse>
-                    ) : (
-                      <AnimatedIcon
-                        icon={config.icon}
-                        size={20}
-                        color="currentColor"
-                        className={config.color}
-                      />
-                    )}
-                    <div>
-                      <p className="text-white font-medium">{verification.vaccineType}</p>
-                      <p className="text-green-200 text-sm">
-                        Submitted: {new Date(verification.createdAt).toLocaleDateString()}
-                      </p>
+                      )}
+                      <div>
+                        <p className="text-white font-medium">{verification.vaccineType}</p>
+                        <p className="text-green-200 text-sm">
+                          Submitted: {new Date(verification.createdAt).toLocaleDateString()}
+                        </p>
+                      </div>
                     </div>
-                  </div>
-                  <motion.span
-                    className={`px-3 py-1 rounded-full text-sm ${config.bg} ${config.color}`}
-                    initial={{ scale: 0.8 }}
-                    animate={{ scale: 1 }}
-                    transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-                    aria-hidden="true"
-                  >
-                    {config.label}
-                  </motion.span>
-                </motion.div>
-              );
-            })
+                    <motion.span
+                      className={`px-3 py-1 rounded-full text-sm ${config.bg} ${config.color}`}
+                      initial={{ scale: 0.8 }}
+                      animate={{ scale: 1 }}
+                      transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+                      aria-hidden="true"
+                    >
+                      {config.label}
+                    </motion.span>
+                  </motion.div>
+                );
+              })
+            )}
+          </AnimatePresence>
+        )}
+
+        {/* Refreshing indicator */}
+        <AnimatePresence>
+          {isRefreshing && (
+            <motion.div
+              className="flex items-center justify-center gap-2 py-4 text-green-200"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <LoadingSpinner size="sm" />
+              <span className="text-sm">Refreshing verifications...</span>
+            </motion.div>
           )}
         </AnimatePresence>
       </div>

From 3b449ae100f93cc14202eb73a426f81ad9282c1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Crhemy-arc=E2=80=9D?= <“rhemaadzer@gmail.com”>
Date: Mon, 24 Aug 2026 10:37:52 +0100
Subject: [PATCH 6/8] test(loading): add comprehensive tests for loading states

Add 22 tests covering LoadingSpinner, Skeleton, CredentialSkeleton,
and LoadingButton components. Tests verify rendering, accessibility
attributes, size variants, and loading/disabled states.
---
 frontend/__tests__/loading-states.test.tsx | 161 +++++++++++++++++++++
 1 file changed, 161 insertions(+)
 create mode 100644 frontend/__tests__/loading-states.test.tsx

diff --git a/frontend/__tests__/loading-states.test.tsx b/frontend/__tests__/loading-states.test.tsx
new file mode 100644
index 00000000..5b778030
--- /dev/null
+++ b/frontend/__tests__/loading-states.test.tsx
@@ -0,0 +1,161 @@
+import { render, screen } from '@testing-library/react';
+import { LoadingSpinner } from '../src/components/animations/loading-spinner';
+import { Skeleton, CredentialSkeleton } from '../src/components/animations/skeleton';
+import { LoadingButton } from '../src/components/animations/loading-button';
+
+describe('LoadingSpinner', () => {
+  it('renders with default size', () => {
+    render(<LoadingSpinner />);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toHaveAttribute('aria-label', 'Loading');
+  });
+
+  it('renders with custom label', () => {
+    render(<LoadingSpinner label="Fetching data" />);
+    expect(screen.getByText('Fetching data')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Fetching data');
+  });
+
+  it('applies size classes correctly', () => {
+    const { container, rerender } = render(<LoadingSpinner size="sm" />);
+    expect(container.querySelector('.w-4')).toBeInTheDocument();
+
+    rerender(<LoadingSpinner size="md" />);
+    expect(container.querySelector('.w-6')).toBeInTheDocument();
+
+    rerender(<LoadingSpinner size="lg" />);
+    expect(container.querySelector('.w-8')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<LoadingSpinner className="mt-4" />);
+    expect(container.firstChild).toHaveClass('mt-4');
+  });
+});
+
+describe('Skeleton', () => {
+  it('renders with default text variant', () => {
+    const { container } = render(<Skeleton />);
+    const skeleton = container.querySelector('[role="status"]');
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveAttribute('aria-label', 'Loading content');
+  });
+
+  it('renders multiple lines for text variant', () => {
+    const { container } = render(<Skeleton variant="text" lines={3} />);
+    const skeletons = container.querySelectorAll('.animate-pulse');
+    expect(skeletons).toHaveLength(3);
+  });
+
+  it('renders circular variant', () => {
+    const { container } = render(<Skeleton variant="circular" width={40} height={40} />);
+    const skeleton = container.querySelector('.rounded-full');
+    expect(skeleton).toBeInTheDocument();
+  });
+
+  it('renders rectangular variant', () => {
+    const { container } = render(<Skeleton variant="rectangular" width={200} height={100} />);
+    const skeleton = container.querySelector('.rounded-lg');
+    expect(skeleton).toBeInTheDocument();
+  });
+
+  it('applies custom dimensions', () => {
+    const { container } = render(<Skeleton width={150} height={20} />);
+    const skeleton = container.querySelector('.animate-pulse');
+    expect(skeleton).toHaveStyle({ width: '150px', height: '20px' });
+  });
+});
+
+describe('CredentialSkeleton', () => {
+  it('renders default count of 3 skeleton items', () => {
+    const { container } = render(<CredentialSkeleton />);
+    // Count the top-level skeleton card items (direct children with bg-white/10 and rounded-lg)
+    const items = container.querySelectorAll('.bg-white\\/10.rounded-lg.p-4');
+    expect(items).toHaveLength(3);
+  });
+
+  it('renders custom count of skeleton items', () => {
+    const { container } = render(<CredentialSkeleton count={5} />);
+    const items = container.querySelectorAll('.bg-white\\/10.rounded-lg.p-4');
+    expect(items).toHaveLength(5);
+  });
+
+  it('has loading status role', () => {
+    const { container } = render(<CredentialSkeleton />);
+    const skeleton = container.querySelector('[aria-label="Loading credentials"]');
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveAttribute('role', 'status');
+  });
+
+  it('contains circular and rectangular skeleton elements', () => {
+    const { container } = render(<CredentialSkeleton count={1} />);
+    expect(container.querySelector('.rounded-full')).toBeInTheDocument();
+    expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
+  });
+});
+
+describe('LoadingButton', () => {
+  it('renders children when not loading', () => {
+    render(<LoadingButton>Submit</LoadingButton>);
+    expect(screen.getByText('Submit')).toBeInTheDocument();
+  });
+
+  it('shows loading text when loading', () => {
+    render(<LoadingButton isLoading loadingText="Saving...">Submit</LoadingButton>);
+    expect(screen.getByText('Saving...')).toBeInTheDocument();
+    expect(screen.queryByText('Submit')).not.toBeInTheDocument();
+  });
+
+  it('shows children as loading text when no loadingText provided', () => {
+    render(<LoadingButton isLoading>Submit</LoadingButton>);
+    expect(screen.getByText('Submit')).toBeInTheDocument();
+  });
+
+  it('is disabled when loading', () => {
+    render(<LoadingButton isLoading>Submit</LoadingButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<LoadingButton disabled>Submit</LoadingButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+  });
+
+  it('applies variant classes correctly', () => {
+    const { container, rerender } = render(<LoadingButton variant="primary">Test</LoadingButton>);
+    expect(container.querySelector('.bg-green-600')).toBeInTheDocument();
+
+    rerender(<LoadingButton variant="secondary">Test</LoadingButton>);
+    expect(container.querySelector('.bg-white\\/10')).toBeInTheDocument();
+
+    rerender(<LoadingButton variant="danger">Test</LoadingButton>);
+    expect(container.querySelector('.bg-red-600')).toBeInTheDocument();
+  });
+
+  it('applies size classes correctly', () => {
+    const { container, rerender } = render(<LoadingButton size="sm">Test</LoadingButton>);
+    expect(container.querySelector('.px-3')).toBeInTheDocument();
+
+    rerender(<LoadingButton size="md">Test</LoadingButton>);
+    expect(container.querySelector('.px-4')).toBeInTheDocument();
+
+    rerender(<LoadingButton size="lg">Test</LoadingButton>);
+    expect(container.querySelector('.px-6')).toBeInTheDocument();
+  });
+
+  it('renders spinner icon when loading', () => {
+    const { container } = render(<LoadingButton isLoading>Submit</LoadingButton>);
+    const spinner = container.querySelector('svg');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<LoadingButton className="mt-4">Test</LoadingButton>);
+    expect(container.querySelector('button')).toHaveClass('mt-4');
+  });
+});

From 4e284f29fb749a8df6f836f1f5832a6cb11a4358 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Crhemy-arc=E2=80=9D?= <“rhemaadzer@gmail.com”>
Date: Mon, 24 Aug 2026 10:37:59 +0100
Subject: [PATCH 7/8] chore(deps): add jest-environment-jsdom for testing

Install jest-environment-jsdom as a dev dependency to support
DOM-based component testing with Jest.
---
 frontend/package-lock.json | 60 --------------------------------------
 1 file changed, 60 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c7520476..2f4ff2bd 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1020,9 +1020,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1039,9 +1036,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1058,9 +1052,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1077,9 +1068,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1096,9 +1084,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1115,9 +1100,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1134,9 +1116,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1153,9 +1132,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1172,9 +1148,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1197,9 +1170,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1222,9 +1192,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1247,9 +1214,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1272,9 +1236,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1297,9 +1258,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1322,9 +1280,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1347,9 +1302,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2323,9 +2275,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2342,9 +2291,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2361,9 +2307,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2380,9 +2323,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [

From 95b52a582d97721927cd7dcf1de0c90863293d08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Crhemy-arc=E2=80=9D?= <“rhemaadzer@gmail.com”>
Date: Mon, 24 Aug 2026 10:56:33 +0100
Subject: [PATCH 8/8] chore: mock wallet address for development testing

Temporarily set a demo wallet address to skip the wallet connect
screen during development. This allows testing the loading states
without needing a real Stellar wallet connection.
---
 frontend/src/app/page.tsx                             | 2 +-
 frontend/src/components/animations/loading-button.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index e4133efd..c91fc6b5 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -21,7 +21,7 @@ const TABS = [
 
 export default function Home() {
   const [activeTab, setActiveTab] = useState('vault');
-  const [walletAddress, setWalletAddress] = useState<string | null>(null);
+  const [walletAddress, setWalletAddress] = useState<string | null>('GDEMO1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ');
   const { announceToScreenReader } = useAccessibility();
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
 
diff --git a/frontend/src/components/animations/loading-button.tsx b/frontend/src/components/animations/loading-button.tsx
index eaeae9e0..767d57d5 100644
--- a/frontend/src/components/animations/loading-button.tsx
+++ b/frontend/src/components/animations/loading-button.tsx
@@ -1,14 +1,15 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { motion, type HTMLMotionProps } from 'framer-motion';
 import { Loader2 } from 'lucide-react';
 import { forwardRef } from 'react';
 
-interface LoadingButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface LoadingButtonProps extends Omit<HTMLMotionProps<'button'>, 'children'> {
   isLoading?: boolean;
   loadingText?: string;
   variant?: 'primary' | 'secondary' | 'danger';
   size?: 'sm' | 'md' | 'lg';
+  children?: React.ReactNode;
 }
 
 const variantClasses = {