Skip to content

Commit b3b0110

Browse files
BlankParticleBlankParticle
authored
chore: improve scrollbar, links and loading states (#591)
1 parent ed91186 commit b3b0110

File tree

10 files changed

+91
-17
lines changed

10 files changed

+91
-17
lines changed

‎apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/context-panel.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
HoverCardContent,
1313
HoverCardPortal
1414
} from '@/src/components/shadcn-ui/hover-card';
15-
import { CaretUp, CaretDown } from '@phosphor-icons/react';
15+
import { CaretUp, CaretDown, SpinnerGap } from '@phosphor-icons/react';
1616
import { useState } from 'react';
1717
import { type formatParticipantData } from '../../utils';
1818
import { memo } from 'react';
@@ -43,7 +43,15 @@ export function ContextPanel({
4343
<span className="select-none p-2">Participants</span>
4444
{participantOpen ? <CaretUp size={14} /> : <CaretDown size={14} />}
4545
</div>
46-
{participants.length === 0 && <span className="p-2">Loading...</span>}
46+
{participants.length === 0 && (
47+
<div className="flex w-full justify-center gap-2 text-center font-bold">
48+
<SpinnerGap
49+
className="size-4 animate-spin"
50+
size={16}
51+
/>
52+
Loading...
53+
</div>
54+
)}
4755
<div className="flex flex-col px-2">
4856
{participants.map((participant, i) => (
4957
<div

‎apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/messages-panel.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { type JSONContent, generateHTML } from '@u22n/tiptap/react';
1717
import { tipTapExtensions } from '@u22n/tiptap/extensions';
1818
import { type formatParticipantData } from '../../utils';
1919
import { cn } from '@/src/lib/utils';
20-
import { DotsThree } from '@phosphor-icons/react';
20+
import { DotsThree, SpinnerGap } from '@phosphor-icons/react';
2121
import { useAtom } from 'jotai';
2222
import { useCopyToClipboard } from '@uidotdev/usehooks';
2323
import { toast } from 'sonner';
@@ -78,8 +78,12 @@ export function MessagesPanel({
7878
(index: number, message: (typeof allMessages)[number]) => (
7979
<div className="h-full w-full">
8080
{index === firstItemIndex && hasNextPage ? (
81-
<div className="flex w-full items-center justify-center gap-2">
82-
<span>Loading...</span>
81+
<div className="flex w-full items-center justify-center gap-2 text-center font-bold">
82+
<SpinnerGap
83+
className="size-4 animate-spin"
84+
size={16}
85+
/>
86+
Loading...
8387
</div>
8488
) : null}
8589
<MessageItem

‎apps/web/src/app/[orgShortcode]/convo/_components/convo-list.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useCallback } from 'react';
66
import { Virtuoso } from 'react-virtuoso';
77
import { ms } from '@u22n/utils/ms';
88
import { ConvoItem } from './convo-list-item';
9+
import { SpinnerGap } from '@phosphor-icons/react';
910

1011
type Props = {
1112
hidden: boolean;
@@ -41,7 +42,13 @@ export function ConvoList(props: Props) {
4142
<ConvoItem convo={convo} />
4243
</div>
4344
{index === allConvos.length - 1 && hasNextPage && (
44-
<div className="w-full text-center font-bold">Loading...</div>
45+
<div className="flex w-full justify-center gap-2 text-center font-bold">
46+
<SpinnerGap
47+
className="size-4 animate-spin"
48+
size={16}
49+
/>
50+
Loading...
51+
</div>
4552
)}
4653
</div>
4754
);
@@ -52,12 +59,18 @@ export function ConvoList(props: Props) {
5259
return (
5360
<div className="flex h-full w-full flex-col">
5461
{isLoading ? (
55-
<div className="w-full py-2 text-center font-bold">Loading...</div>
62+
<div className="flex w-full justify-center gap-2 text-center font-bold">
63+
<SpinnerGap
64+
className="size-4 animate-spin"
65+
size={16}
66+
/>
67+
Loading...
68+
</div>
5669
) : (
5770
<Virtuoso
5871
data={allConvos}
5972
itemContent={itemRenderer}
60-
style={{ overscrollBehavior: 'contain' }}
73+
style={{ overscrollBehavior: 'contain', overflowX: 'clip' }}
6174
endReached={async () => {
6275
if (hasNextPage && !isFetchingNextPage) await fetchNextPage();
6376
}}

‎apps/web/src/app/[orgShortcode]/convo/layout.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default function Layout({
8989

9090
return (
9191
<div className="flex h-full w-full flex-row gap-0 xl:grid xl:grid-cols-3">
92-
<div className="flex h-full min-w-96 flex-col gap-2 p-4 pt-3 xl:col-span-1 xl:min-w-80">
92+
<div className="flex h-full min-w-96 flex-col gap-2 p-2 pt-3 xl:col-span-1 xl:min-w-80">
9393
<div
9494
className={
9595
'flex w-full flex-row items-center justify-between gap-2 overflow-visible p-2.5 pt-0'
@@ -127,8 +127,10 @@ export default function Layout({
127127
className="h-4 w-4"
128128
/>
129129
</div>
130-
<BreadcrumbLink href={`/${orgShortcode}/convo`}>
131-
{showHidden ? 'Hidden Conversations' : 'Conversations'}
130+
<BreadcrumbLink asChild>
131+
<Link href={`/${orgShortcode}/convo`}>
132+
{showHidden ? 'Hidden Conversations' : 'Conversations'}
133+
</Link>
132134
</BreadcrumbLink>
133135
</BreadcrumbItem>
134136
</BreadcrumbList>

‎apps/web/src/app/[orgShortcode]/settings/layout.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export default function Layout({
77
return (
88
<div className="flex h-full w-full">
99
<SettingsSidebar />
10-
<div className="flex h-full w-full flex-1">{children}</div>
10+
<div className="flex h-full w-full flex-1 overflow-y-auto">
11+
{children}
12+
</div>
1113
</div>
1214
);
1315
}

‎apps/web/src/app/[orgShortcode]/settings/org/mail/addresses/[addressId]/page.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useGlobalStore } from '@/src/providers/global-store-provider';
55
import { type TypeId } from '@u22n/utils/typeid';
66
import { Button } from '@/src/components/shadcn-ui/button';
77
import Link from 'next/link';
8-
import { ArrowLeft, Info } from '@phosphor-icons/react';
8+
import { ArrowLeft, Info, SpinnerGap } from '@phosphor-icons/react';
99
import {
1010
Alert,
1111
AlertDescription,
@@ -54,7 +54,15 @@ export default function Page({
5454
need help.
5555
</AlertDescription>
5656
</Alert>
57-
{isLoading && <div>Loading...</div>}
57+
{isLoading && (
58+
<div className="flex w-full justify-center gap-2 text-center font-bold">
59+
<SpinnerGap
60+
className="size-4 animate-spin"
61+
size={16}
62+
/>
63+
Loading...
64+
</div>
65+
)}
5866
{emailInfo ? (
5967
<>
6068
<div>

‎apps/web/src/app/[orgShortcode]/settings/org/mail/addresses/page.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { platform } from '@/src/lib/trpc';
55
import { useGlobalStore } from '@/src/providers/global-store-provider';
66
import { columns } from './_components/columns';
77
import { AddEmailModal } from './_components/add-address-modal';
8+
import { SpinnerGap } from '@phosphor-icons/react';
89

910
export default function Page() {
1011
const orgShortcode = useGlobalStore((state) => state.currentOrg.shortcode);
@@ -22,7 +23,15 @@ export default function Page() {
2223
</div>
2324
<AddEmailModal />
2425
</div>
25-
{isLoading && <div>Loading...</div>}
26+
{isLoading && (
27+
<div className="flex w-full justify-center gap-2 text-center font-bold">
28+
<SpinnerGap
29+
className="size-4 animate-spin"
30+
size={16}
31+
/>
32+
Loading...
33+
</div>
34+
)}
2635
{emailsList && (
2736
<DataTable
2837
columns={columns}

‎apps/web/src/app/[orgShortcode]/settings/org/users/invites/page.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { platform } from '@/src/lib/trpc';
55
import { useGlobalStore } from '@/src/providers/global-store-provider';
66
import { columns } from './_components/columns';
77
import { InviteModal } from './_components/invite-modal';
8+
import { SpinnerGap } from '@phosphor-icons/react';
89

910
export default function Page() {
1011
const orgShortcode = useGlobalStore((state) => state.currentOrg.shortcode);
@@ -22,7 +23,15 @@ export default function Page() {
2223
</div>
2324
<InviteModal />
2425
</div>
25-
{isLoading && <div>Loading...</div>}
26+
{isLoading && (
27+
<div className="flex w-full justify-center gap-2 text-center font-bold">
28+
<SpinnerGap
29+
className="size-4 animate-spin"
30+
size={16}
31+
/>
32+
Loading...
33+
</div>
34+
)}
2635
{inviteList && (
2736
<DataTable
2837
columns={columns}

‎apps/web/src/app/[orgShortcode]/settings/org/users/teams/_components/new-team-modal.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
} from '@/src/components/shadcn-ui/dialog';
2929
import { useState } from 'react';
3030
import { type UiColor, uiColors } from '@u22n/utils/colors';
31+
import { SpinnerGap } from '@phosphor-icons/react';
3132

3233
export function NewTeamModal() {
3334
const orgShortcode = useGlobalStore((state) => state.currentOrg.shortcode);
@@ -132,7 +133,13 @@ export function NewTeamModal() {
132133
<DialogDescription>Create a new Team for your Org</DialogDescription>
133134
</DialogHeader>
134135
{isLoading ? (
135-
<div>Loading...</div>
136+
<div className="flex w-full justify-center gap-2 text-center font-bold">
137+
<SpinnerGap
138+
className="size-4 animate-spin"
139+
size={16}
140+
/>
141+
Loading...
142+
</div>
136143
) : !canAddTeam ? (
137144
<div>
138145
Your Current Billing Plan does not allow you to create Teams

‎apps/web/src/styles/globals.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,15 @@
8383
height: 0;
8484
pointer-events: none;
8585
}
86+
87+
@media (orientation: landscape) {
88+
::-webkit-scrollbar {
89+
@apply bg-slate-2 h-[6px] w-[6px];
90+
}
91+
::-webkit-scrollbar-thumb {
92+
@apply bg-slate-4 border-slate-2 rounded-xl border;
93+
}
94+
::-webkit-scrollbar-track {
95+
@apply bg-slate-1 rounded-xl;
96+
}
97+
}

0 commit comments

Comments
 (0)