Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add full screen loader to field #24

Merged
merged 7 commits into from
Aug 12, 2024
Merged

feat: add full screen loader to field #24

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3cdbc57
feat: add full screen loader to field
drewradcliff Aug 10, 2024
2b06eb0
Update field.tsx
drewradcliff Aug 10, 2024
b00f579
Update field.tsx
drewradcliff Aug 10, 2024
d14451f
Update header.tsx
drewradcliff Aug 10, 2024
ff0fb4f
update loader styles
drewradcliff Aug 12, 2024
700b7ba
Merge branch 'loader' of github.com:lewxdev/mmmines into loader
drewradcliff Aug 12, 2024
f65adb3
Apply suggestions from code review
drewradcliff Aug 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions app/components/field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,27 @@ export function Field() {
);
}, [size]);

// todo: add skeleton loader
return !plots ? null : (
return !plots ? (
<div className="absolute bg-white h-full w-full left-0 right-0">
drewradcliff marked this conversation as resolved.
Show resolved Hide resolved
<div className="h-full flex items-center justify-center">
<div
className="grid animate-pulse"
style={{
gap: `${GAP_SIZE}rem`,
gridTemplateColumns: `repeat(3, ${GRID_SIZE}rem)`,
}}
>
{Array.from({ length: 9 }, (_, index) => (
<div
key={index}
className="bg-gray-100"
style={{ height: `${GRID_SIZE}rem`, width: `${GRID_SIZE}rem` }}
/>
))}
</div>
</div>
</div>
) : (
<div
className="max-w-full select-none overflow-auto bg-white"
onContextMenu={(event) => event.preventDefault()}
Expand Down
28 changes: 17 additions & 11 deletions app/components/header.tsx
View file
Open in desktop
lewxdev marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,24 @@ export function Header() {
>
<div className="flex justify-between">
<h1 className="text-4xl">mmmines</h1>
{!!clientsCount && (
<div className="flex flex-col items-end gap-2">
<div className="flex items-center gap-2">
<span>{clientsCount}</span>
<UsersIcon className="h-4 w-4" />
</div>
<div className="flex items-center justify-end gap-2">
<span className="">{exposedPercent}</span>
<Percent className="h-4 w-4" />
</div>
<div className="flex flex-col items-end gap-2">
<div className="flex items-center gap-2">
{!!clientsCount && (
<>
<span>{clientsCount}</span>
<UsersIcon className="h-4 w-4" />
</>
)}
drewradcliff marked this conversation as resolved.
Show resolved Hide resolved
</div>
)}
<div className="flex items-center justify-end gap-2">
{!!exposedPercent && (
<>
<span className="">{exposedPercent}</span>
drewradcliff marked this conversation as resolved.
Show resolved Hide resolved
<Percent className="h-4 w-4" />
</>
)}
</div>
</div>
</div>
</header>
);
Expand Down