diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss index 0f10bbfdc..5734e1660 100644 --- a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss +++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss @@ -3,9 +3,20 @@ .followers { width: 100%; padding: 5px; + min-height: 20vh; + .followerRow { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + @media (max-width: 900px) { + .followerRow { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } @include screen(mobile) { .followerRow { + display: block; justify-content: center; } } diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx index 275ac65b5..6b2099fba 100644 --- a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx +++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx @@ -1,5 +1,5 @@ import { FC, useEffect, useState } from 'react'; -import { Col, Pagination, Row, Skeleton } from 'antd'; +import { Pagination, Spin } from 'antd'; import { ErrorBoundary } from 'react-error-boundary'; import { Follower } from '../../../../interfaces/follower'; import { SingleFollower } from '../SingleFollower/SingleFollower'; @@ -23,8 +23,10 @@ export const FollowerCollection: FC = ({ name, onFollow const getFollowers = async () => { try { + setLoading(true); + const response = await fetch( - `${ENDPOINT}?offset=${page * ITEMS_PER_PAGE}&limit=${ITEMS_PER_PAGE}`, + `${ENDPOINT}?offset=${(page - 1) * ITEMS_PER_PAGE}&limit=${ITEMS_PER_PAGE}`, ); const data = await response.json(); @@ -60,13 +62,7 @@ export const FollowerCollection: FC = ({ name, onFollow ); - const loadingSkeleton = ; - - if (loading) { - return loadingSkeleton; - } - - if (!followers?.length) { + if (!followers?.length && !loading) { return noFollowers; } @@ -81,28 +77,28 @@ export const FollowerCollection: FC = ({ name, onFollow /> )} > -
- - {followers.map(follower => ( - + +
+
+ {followers.map(follower => ( - - ))} - + ))} +
- { - setPage(p); - }} - hideOnSinglePage - /> -
+ { + setPage(p); + }} + hideOnSinglePage + /> +
+ ); }; diff --git a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss b/web/components/ui/followers/SingleFollower/SingleFollower.module.scss index a425d36cc..f53bf4d31 100644 --- a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss +++ b/web/components/ui/followers/SingleFollower/SingleFollower.module.scss @@ -7,9 +7,8 @@ padding: 10px 10px; border-radius: 15px; height: 75px; - width: 250px; font-size: 0.8rem; - + margin: 5px; color: var(--theme-color-components-text-on-light); .name { diff --git a/web/components/ui/followers/SingleFollower/SingleFollower.tsx b/web/components/ui/followers/SingleFollower/SingleFollower.tsx index 74b427855..4cb35bcff 100644 --- a/web/components/ui/followers/SingleFollower/SingleFollower.tsx +++ b/web/components/ui/followers/SingleFollower/SingleFollower.tsx @@ -12,7 +12,7 @@ export const SingleFollower: FC = ({ follower }) => (