mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-05-24 08:49:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Replace loading indicator with ProfileGridSkeleton for profiles and add reusable skeleton component

Browse Source
This commit is contained in:
MartinBraquet
2026-05-23 17:11:51 +02:00
parent c72b13fef9
commit 5ad38c8a8c
2 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/components/profile-grid.tsx
View File

@@ -41,6 +41,45 @@ import {capitalizePure} from 'web/lib/util/time'
import {Col} from './layout/col'
export function ProfileGridSkeleton(props: {count?: number; className?: string}) {
const {count = 6, className} = props
return (
<div className={clsx('grid gap-6 py-4 grid-cols-1', className)}>
{Array.from({length: count}).map((_, i) => (
<div
key={i}
className="rounded-xl border border-canvas-300 bg-canvas-50 overflow-hidden animate-pulse"
>
<div className="flex flex-row h-full justify-between">
<div className="flex-1 px-4 py-3 space-y-2 min-w-0">
{/* name */}
<div className="h-5 bg-canvas-200 rounded w-2/5" />
{/* age / location */}
<div className="h-3.5 bg-canvas-200 rounded w-1/3" />
{/* headline */}
<div className="h-3.5 bg-canvas-200 rounded w-3/5 mt-1" />
{/* keyword pills */}
<div className="flex gap-2 pt-1">
<div className="h-6 bg-canvas-200 rounded-full w-16" />
<div className="h-6 bg-canvas-200 rounded-full w-20" />
<div className="h-6 bg-canvas-200 rounded-full w-14" />
</div>
{/* bio lines */}
<div className="space-y-1.5 pt-1">
<div className="h-3 bg-canvas-200 rounded w-full" />
<div className="h-3 bg-canvas-200 rounded w-4/5" />
<div className="h-3 bg-canvas-200 rounded w-3/4" />
</div>
</div>
{/* photo placeholder */}
<div className="shrink-0 w-40 min-h-24 bg-canvas-200 rounded-r-xl" />
</div>
</div>
))}
</div>
)
}
export const ProfileGrid = (props: {
profiles: Profile[]
loadMore: () => Promise<boolean>

5
web/components/profiles/profiles-home.tsx
View File

@@ -11,8 +11,7 @@ import {Search} from 'web/components/filters/search'
import {useFilters} from 'web/components/filters/use-filters'
import {Col} from 'web/components/layout/col'
import {Row} from 'web/components/layout/row'
import {ProfileGrid} from 'web/components/profile-grid'
import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
import {ProfileGrid, ProfileGridSkeleton} from 'web/components/profile-grid'
import {Title} from 'web/components/widgets/title'
import {useBookmarkedSearches} from 'web/hooks/use-bookmarked-searches'
import {useDisplayOptions} from 'web/hooks/use-display-options'
@@ -329,7 +328,7 @@ export function ProfilesHome() {
filtersElement={filtersElement}
/>
{displayProfiles === undefined || compatibleProfiles === undefined ? (
<CompassLoadingIndicator />
<ProfileGridSkeleton count={6} />
) : (
<>
{fromSignup && isClearedFilters && (