mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-05-30 19:57:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add loading profile skeleton

Browse Source
This commit is contained in:
MartinBraquet
2026-05-28 17:19:00 +02:00
parent 9cfe6b0eda
commit 6f412e60bf
3 changed files with 60 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
android/app/build.gradle
View File

@@ -11,8 +11,8 @@ android {
applicationId "com.compassconnections.app"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 113
versionName "1.27.0"
versionCode 114
versionName "1.28.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
aaptOptions {
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

54
web/components/profile/profile-info.tsx
View File

@@ -207,6 +207,60 @@ export function ProfileInfo(props: {
)
}
export function ProfileInfoSkeleton() {
return (
<>
<div
className="bg-canvas-50 border-canvas-300 mb-6 flex items-center border-b px-4 sm:px-9 py-4"
style={{
borderBottomWidth: '1px',
gap: '10px',
}}
>
<div className="flex w-full items-center gap-2">
<BackButton />
</div>
</div>
<div className="mx-auto w-full px-4 sm:px-8 pb-6 pt-0 animate-pulse">
<Row className="gap-6 flex-wrap">
<div className="bg-canvas-200 h-[108px] w-[108px] flex-none rounded-2xl" />
<Col className="flex-1 gap-3 py-1 min-w-[160px]">
<div className="bg-canvas-200 h-8 w-2/3 max-w-[240px] rounded" />
<div className="bg-canvas-200 h-4 w-1/2 max-w-[180px] rounded" />
<div className="bg-canvas-200 h-4 w-2/5 max-w-[140px] rounded" />
</Col>
</Row>
<Row className="gap-2 flex-wrap py-3 mt-2 max-w-full sm:max-w-[500px]">
<div className="bg-canvas-200 h-7 w-16 rounded-full" />
<div className="bg-canvas-200 h-7 w-20 rounded-full" />
<div className="bg-canvas-200 h-7 w-14 rounded-full" />
<div className="bg-canvas-200 h-7 w-24 rounded-full" />
</Row>
<div
className="bg-canvas-50 border-canvas-300 border mt-6"
style={{borderRadius: '14px', padding: '22px 24px'}}
>
<div className="bg-canvas-200 h-6 w-24 rounded mb-5" />
<Col className="gap-4">
{[...Array(6)].map((_, i) => (
<Row key={i} className="items-center gap-2.5">
<div className="bg-canvas-200 h-8 w-8 flex-none rounded-lg" />
<Col className="flex-1 gap-1.5">
<div className="bg-canvas-200 h-3 w-20 rounded" />
<div className="bg-canvas-200 h-4 w-3/5 rounded" />
</Col>
</Row>
))}
</Col>
</div>
</div>
</>
)
}
function ProfileCard(props: {title?: ReactNode; children: ReactNode; className?: string}) {
const {title, children, className} = props
// Check if children is null or undefined

9
web/pages/[username]/index.tsx
View File

@@ -11,9 +11,8 @@ import {useRouter} from 'next/router'
import {useEffect, useMemo, useState} from 'react'
import {Col} from 'web/components/layout/col'
import {PageBase} from 'web/components/page-base'
import {ProfileInfo} from 'web/components/profile/profile-info'
import {ProfileInfo, ProfileInfoSkeleton} from 'web/components/profile/profile-info'
import {SEO} from 'web/components/SEO'
import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
import {useProfileByUser} from 'web/hooks/use-profile'
import {useSaveReferral} from 'web/hooks/use-save-referral'
import {useTracking} from 'web/hooks/use-tracking'
@@ -219,8 +218,8 @@ export default function UserPage(props: UserPageProps) {
if (loading) {
return (
<PageBase trackPageView={'user page'}>
<CompassLoadingIndicator />
<PageBase trackPageView={'user page'} className={'relative !px-0 sm:pt-0 !mt-0 col-span-10'}>
<ProfileInfoSkeleton />
</PageBase>
)
}
@@ -324,7 +323,7 @@ function UserPageInner(props: ActiveUserPageProps) {
fromSignup={fromSignup}
/>
) : (
<CompassLoadingIndicator />
<ProfileInfoSkeleton />
)}
</Col>
)}