add loading states

app/components/LoadingModal.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { Dialog, Transition } from '@headlessui/react'
+import React, { Fragment } from 'react'
+import { ClipLoader } from 'react-spinners'
+
+const LoadingModal = () => {
+  return (
+    <Transition.Root show as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={() => {}}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-100 bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center ">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel>
+                <ClipLoader size={40} color="#0284c7" />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}
+
+export default LoadingModal

app/conversations/[conversationId]/components/ImageModel.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import Modal from '@/app/components/Modal'
+import Image from 'next/image'
+
+interface ImageModalProps {
+  src?: string | null
+  isOpen?: boolean
+  onClose: () => void
+}
+
+const ImageModal: React.FC<ImageModalProps> = ({ isOpen, onClose, src }) => {
+  if (!src) {
+    return null
+  }
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="w-80 h-80">
+        <Image alt="Image" className="object-cover" fill src={src} />
+      </div>
+    </Modal>
+  )
+}
+
+export default ImageModal

app/conversations/[conversationId]/components/MessageBox.tsx

@@ -6,6 +6,8 @@ import clsx from 'clsx'
 import format from 'date-fns/format'
 import { useSession } from 'next-auth/react'
 import Image from 'next/image'
+import { useState } from 'react'
+import ImageModal from './ImageModel'
 
 interface MessageBoxProps {
   data: FullMessageType
@@ -15,6 +17,8 @@ interface MessageBoxProps {
 const MessageBox: React.FC<MessageBoxProps> = ({ data, isLast }) => {
   const session = useSession()
 
+  const [isImageModalOpen, setIsImageModalOpen] = useState(false)
+
   const isOwn = session?.data?.user?.email === data?.sender?.email
   const seenList = (data.seen || [])
     .filter((user) => user.email !== data?.sender?.email)
@@ -46,8 +50,14 @@ const MessageBox: React.FC<MessageBoxProps> = ({ data, isLast }) => {
           </div>
         </div>
         <div className={message}>
+          <ImageModal
+            src={data.image}
+            isOpen={isImageModalOpen}
+            onClose={() => setIsImageModalOpen(false)}
+          />
           {data.image ? (
             <Image
+              onClick={() => setIsImageModalOpen(true)}
               alt="Image"
               height="288"
               width="288"

app/conversations/loading.tsx

@@ -0,0 +1,7 @@
+import LoadingModal from '../components/LoadingModal'
+
+const Loading = () => {
+  return <LoadingModal />
+}
+
+export default Loading

app/users/components/UserBox.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import Avatar from '@/app/components/Avatar'
+import LoadingModal from '@/app/components/LoadingModal'
 import { User } from '@prisma/client'
 import axios from 'axios'
 import { useRouter } from 'next/navigation'
@@ -25,19 +26,22 @@ const UserBox: React.FC<UserBoxProps> = ({ data }) => {
       .finally(() => setIsLoading(false))
   }, [data, router])
   return (
-    <div
-      onClick={handleClick}
-      className="w-full relative flex items-center space-x-3 bg-white p-3 hover:bg-neutral-100 rounded-lg transition cursor-pointer"
-    >
-      <Avatar user={data} />
-      <div className="min-w-0 flex-1">
-        <div className="focus:outline-none">
-          <div className="flex justify-between items-center mb-1">
-            <p className="font-medium text-gray-900">{data.name}</p>
+    <>
+      {isLoading && <LoadingModal />}
+      <div
+        onClick={handleClick}
+        className="w-full relative flex items-center space-x-3 bg-white p-3 hover:bg-neutral-100 rounded-lg transition cursor-pointer"
+      >
+        <Avatar user={data} />
+        <div className="min-w-0 flex-1">
+          <div className="focus:outline-none">
+            <div className="flex justify-between items-center mb-1">
+              <p className="font-medium text-gray-900">{data.name}</p>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }
 

app/users/loading.tsx

@@ -0,0 +1,7 @@
+import LoadingModal from '../components/LoadingModal'
+
+const Loading = () => {
+  return <LoadingModal />
+}
+
+export default Loading

package.json

@@ -34,6 +34,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.10.1",
     "react-select": "^5.7.4",
+    "react-spinners": "^0.13.8",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.3"
   },