profiles loading view

fullstack-chat · Apr 30, 2024 · be75718 · be75718
1 parent be9fff6
commit be75718
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/src/app/profiles/page.tsx b/src/app/profiles/page.tsx
@@ -3,14 +3,17 @@ import React, { useEffect, useState } from 'react'
 import { getPublicProfiles } from '../lib/actions'
 import { UserInfo } from '../lib/models'
 import UserProfileCard from '../lib/components/UserProfileCard'
+import LoadingView from '../views/LoadingView'
 
 function Profiles() {
   const [profiles, setProfiles] = useState<UserInfo[]>([])
+  const [isLoading, setIsLoading] = useState<boolean>(true)
 
   useEffect(() => {
     async function fetchData() {
       let p = await getPublicProfiles()
       setProfiles([...p])
+      setIsLoading(false)
     }
     fetchData()
   }, [])
@@ -19,6 +22,7 @@ function Profiles() {
     <div className='flex flex-col gap-4'>
       <h1>Profiles</h1>
       <div>Members of our amazing community:</div>
+      {isLoading && <LoadingView />}
       <div className='grid grid-cols-3 gap-4'>
         {profiles.map((p, i) => <UserProfileCard key={i} userInfo={p} />)}
       </div>