implement alert skeleton for loading state

components/alertSkeleton.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function AlertSkeleton() {
+  return (
+    <div role="status">
+      <div className="animate-pulse">
+        <div className="w-11/12 h-5 bg-indigo-200 rounded-md mb-2 sm:h-6 sm:mb-0"></div>
+        <div className="w-4/5 h-5 bg-indigo-200 rounded-md sm:hidden"></div>
+      </div>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}

components/lastAvailableSlotsInfo.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import cn from 'classnames';
 import Alert from './alert';
+import AlertSkeleton from './alertSkeleton';
 import { useGetLastAvailableSlotsDate } from '@/lib/api-hooks';
 import { FetchState } from '@/lib/types';
 
@@ -14,16 +14,17 @@ export default function LastAvailableSlotsInfo() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return fetchState !== FetchState.ERROR ? (
+  if (fetchState === FetchState.ERROR) {
+    return null;
+  }
+
+  return (
     <Alert>
-      <div
-        className={cn(
-          'transition-opacity duration-300',
-          fetchState !== FetchState.SUCCESS ? 'opacity-0' : 'opacity-100'
-        )}
-      >
-        Last available slots were spotted on {lastAvailableSlotsDate}.
-      </div>
+      {fetchState !== FetchState.SUCCESS ? (
+        <AlertSkeleton />
+      ) : (
+        `Last available slots were spotted on ${lastAvailableSlotsDate}.`
+      )}
     </Alert>
-  ) : null;
+  );
 }

lib/api-hooks.ts

@@ -88,9 +88,7 @@ export function useUnsubscribe() {
 
 export function useGetLastAvailableSlotsDate() {
   const [fetchState, setFetchState] = useState(FetchState.DEFAULT);
-  const [lastAvailableSlotsDate, setLastAvailableSlotsDate] = useState(
-    '----------------------'
-  );
+  const [lastAvailableSlotsDate, setLastAvailableSlotsDate] = useState('');
   const getLastAvailableSlotsDate = async () => {
     try {
       setFetchState(FetchState.LOADING);