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

Jump to bottom

Adds a loading skeleton to posts, comments and trending communities #2311

Merged
merged 17 commits into from Mar 27, 2024
+139 −47
Merged

Adds a loading skeleton to posts, comments and trending communities #2311

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7880be7
creates the initial loading skeleton for the home page
rodrigo-fm Jan 1, 2024
4fb2ea0
initial setup for the trending communities loading skeleton
rodrigo-fm Jan 1, 2024
480ef15
adds posts loading skeleton to the community page
rodrigo-fm Jan 1, 2024
50b801f
finishes the creation of all loading skeletons for large devices
rodrigo-fm Jan 3, 2024
b9e6e4f
finishes loading skeleton for smaller screens
rodrigo-fm Jan 5, 2024
61f1d1c
removes unecessary code for the loading skeleton
rodrigo-fm Jan 7, 2024
f8dc16e
Merge branch 'main' into feature/loading-skeleton
rodrigo-fm Jan 7, 2024
eacb8c1
[loading skeleton] removes unecessary mock code
rodrigo-fm Jan 7, 2024
843e569
[loading skeleton] removes custom css classes and adds more bootstrap…
rodrigo-fm Jan 11, 2024
4dfaba4
replaces custom styles with bootstrap classes
rodrigo-fm Mar 25, 2024
73016da
rendes only one component for desktop and mobile screens
rodrigo-fm Mar 25, 2024
85b7a2c
fixes merge conficts main branch's community.tsx
rodrigo-fm Mar 25, 2024
e5a2024
fixes lint's indentation problems
rodrigo-fm Mar 25, 2024
bc043db
transforms span tags into self-closing tags
rodrigo-fm Mar 26, 2024
8ec8508
removes every inline style from the loading-skeleton.tsx file
rodrigo-fm Mar 26, 2024
f8139b0
fixes lemmy-translations merge conflict
rodrigo-fm Mar 27, 2024
061828b
fixes merge conflicts on home.tsx and inbox.tsx
rodrigo-fm Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion lemmy-translations
Open in desktop
Submodule lemmy-translations updated 2 files
+5 −22 translations/de.json
+3 −3 translations/ru.json
31 changes: 31 additions & 0 deletions src/assets/css/loading-skeleton.css
View file
Open in desktop
rodrigo-fm marked this conversation as resolved.
Show resolved Hide resolved
@@ -0,0 +1,31 @@
.skeleton-pulse {
animation: skeleton-loading 1.2s linear infinite alternate;
}

.skeleton-pulse[data-bs-theme="dark"] {
background-color: #5a5a5a;
}

.skeleton-pulse[data-bs-theme="light"] {
background-color: #dadada;
}

.trending-community-icon-skeleton {
border-radius: 100%;
width: 1.5rem;
height: 1.5rem;
}

.post-line-loading-skeleton {
height: 1.5rem;
margin-bottom: 4px;
}
@keyframes skeleton-loading {
0% {
opacity: 100%;
}

100% {
opacity: 35%;
}
}
1 change: 1 addition & 0 deletions src/shared/components/app/styles.scss
View file
Open in desktop
Expand Up @@ -4,3 +4,4 @@
@import "../../../../node_modules/tippy.js/dist/tippy.css";
@import "../../../../node_modules/bootstrap/dist/css/bootstrap-utilities.min.css";
@import "../../../assets/css/main.css";
@import "../../../assets/css/loading-skeleton.css"
192 changes: 192 additions & 0 deletions src/shared/components/common/loading-skeleton.tsx
View file
Open in desktop
@@ -0,0 +1,192 @@
import { setIsoData } from "@utils/app";
import dataBsTheme from "@utils/browser/data-bs-theme";
import { Component } from "inferno";

interface LoadingSkeletonProps {
itemCount?: number;
}

interface LoadingSkeletonItemProps {
theme: string;
dessalines marked this conversation as resolved.
Show resolved Hide resolved
}

export class PostsLoadingSkeleton extends Component<LoadingSkeletonProps, any> {
private theme: string = dataBsTheme(setIsoData(this.context).site_res);
dessalines marked this conversation as resolved.
Show resolved Hide resolved

render() {
return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (
<PostsLoadingSkeletonItem key={index} theme={this.theme} />
));
}
}

class PostThumbnailLoadingSkeleton extends Component<
LoadingSkeletonItemProps,
any
> {
render() {
return (
<div
className="thumbnail rounded d-flex justify-content-center skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
);
}
}

class PostsLoadingSkeletonItem extends Component<
LoadingSkeletonItemProps,
any
> {
render() {
return (
<>
{/* mobile */}
<div className="d-block d-sm-none">
<div className="col flex-grow-1 mt-2">
<div className="row">
<div className="col flex-grow-1">
<div
className="col-12 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
<div
className="col-8 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
<div
className="col-6 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
</div>
<div className="col flex-grow-0">
<PostThumbnailLoadingSkeleton theme={this.props.theme} />
</div>
</div>
</div>
</div>
{/* desktop */}
<div className="d-none d-sm-block">
<div className="col flex-grow-1 mt-2">
<div className="row">
<div className="col flex-grow-0">
<PostThumbnailLoadingSkeleton theme={this.props.theme} />
</div>
<div className="col flex-grow-1">
<div
className="col-12 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
<div
className="col-8 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
<div
className="col-4 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
</div>
</div>
</div>
</div>
</>
);
}
}

export class TrendingCommunitiesLoadingSkeleton extends Component<
LoadingSkeletonProps,
any
> {
private theme: string = dataBsTheme(setIsoData(this.context).site_res);

render() {
return (
<div className="mb-2">
{Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (
<TrendingCommunitiesLoadingSkeletonItem
key={index}
theme={this.theme}
/>
))}
</div>
);
}
}

class TrendingCommunitiesLoadingSkeletonItem extends Component<
LoadingSkeletonItemProps,
any
> {
render() {
return (
<div
className="col flex-grow-1 mt-2"
style={{
rodrigo-fm marked this conversation as resolved.
Show resolved Hide resolved
"padding-left": "calc(var(--bs-gutter-x) *0.5)",
"padding-right": "calc(var(--bs-gutter-x) * 1)",
}}
>
<div className="row">
<div className="col flex-grow-0" style={{ "padding-right": "0px" }}>
<div
className="trending-community-icon-skeleton d-flex skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
</div>
<div className="col flex-grow-1" style={{ "padding-right": "0px" }}>
<div
className="col-12 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
</div>
</div>
</div>
);
}
}

export class CommentsLoadingSkeleton extends Component<
LoadingSkeletonProps,
any
> {
private theme: string = dataBsTheme(setIsoData(this.context).site_res);

render() {
return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (
<CommentsLoadingSkeletonItem key={index} theme={this.theme} />
));
}
}

class CommentsLoadingSkeletonItem extends Component<
LoadingSkeletonItemProps,
any
> {
render() {
return (
<div className="col flex-grow-1 my-2 p-2">
<div className="row">
<div className="col flex-grow-1">
<div
className="col-6 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
<div
className="col-12 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
<div
className="col-7 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
<div
className="col-4 post-line-loading-skeleton skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
</div>
</div>
</div>
);
}
}
16 changes: 6 additions & 10 deletions src/shared/components/community/community.tsx
View file
Open in desktop
Expand Up @@ -101,6 +101,10 @@ import { PostListings } from "../post/post-listings";
import { CommunityLink } from "./community-link";
import { PaginatorCursor } from "../common/paginator-cursor";
import { getHttpBaseInternal } from "../../utils/env";
import {
CommentsLoadingSkeleton,
PostsLoadingSkeleton,
} from "../common/loading-skeleton";

type CommunityData = RouteDataResponse<{
communityRes: GetCommunityResponse;
Expand Down Expand Up @@ -417,11 +421,7 @@ export class Community extends Component<
if (dataType === DataType.Post) {
switch (this.state.postsRes.state) {
case "loading":
return (
<h5>
<Spinner large />
</h5>
);
return <PostsLoadingSkeleton />;
case "success":
return (
<PostListings
Expand Down Expand Up @@ -454,11 +454,7 @@ export class Community extends Component<
} else {
switch (this.state.commentsRes.state) {
case "loading":
return (
<h5>
<Spinner large />
</h5>
);
return <CommentsLoadingSkeleton />;
case "success":
return (
<CommentNodes
Expand Down
25 changes: 9 additions & 16 deletions src/shared/components/home/home.tsx
View file
Open in desktop
Expand Up @@ -92,14 +92,19 @@ import { toast } from "../../toast";
import { CommentNodes } from "../comment/comment-nodes";
import { DataTypeSelect } from "../common/data-type-select";
import { HtmlTags } from "../common/html-tags";
import { Icon, Spinner } from "../common/icon";
import { Icon } from "../common/icon";
import { ListingTypeSelect } from "../common/listing-type-select";
import { SortSelect } from "../common/sort-select";
import { CommunityLink } from "../community/community-link";
import { PostListings } from "../post/post-listings";
import { SiteSidebar } from "./site-sidebar";
import { PaginatorCursor } from "../common/paginator-cursor";
import { getHttpBaseInternal } from "../../utils/env";
import {
CommentsLoadingSkeleton,
PostsLoadingSkeleton,
TrendingCommunitiesLoadingSkeleton,
} from "../common/loading-skeleton";

interface HomeState {
postsRes: RequestState<GetPostsResponse>;
Expand Down Expand Up @@ -511,11 +516,7 @@ export class Home extends Component<any, HomeState> {
trendingCommunities() {
switch (this.state.trendingCommunitiesRes?.state) {
case "loading":
return (
<h5>
<Spinner large />
</h5>
);
return <TrendingCommunitiesLoadingSkeleton itemCount={5} />;
case "success": {
const trending = this.state.trendingCommunitiesRes.data.communities;
return (
Expand Down Expand Up @@ -684,11 +685,7 @@ export class Home extends Component<any, HomeState> {
case "empty":
return <div style="min-height: 20000px;"></div>;
case "loading":
return (
<h5>
<Spinner large />
</h5>
);
return <PostsLoadingSkeleton />;
case "success": {
const posts = this.state.postsRes.data.posts;
return (
Expand Down Expand Up @@ -724,11 +721,7 @@ export class Home extends Component<any, HomeState> {
} else {
switch (this.state.commentsRes.state) {
case "loading":
return (
<h5>
<Spinner large />
</h5>
);
return <CommentsLoadingSkeleton />;
case "success": {
const comments = this.state.commentsRes.data.comments;
return (
Expand Down
25 changes: 5 additions & 20 deletions src/shared/components/person/inbox.tsx
View file
Open in desktop
Expand Up @@ -80,6 +80,7 @@ import { Icon, Spinner } from "../common/icon";
import { Paginator } from "../common/paginator";
import { PrivateMessage } from "../private_message/private-message";
import { getHttpBaseInternal } from "../../utils/env";
import { CommentsLoadingSkeleton } from "../common/loading-skeleton";

enum UnreadOrAll {
Unread,
Expand Down Expand Up @@ -573,11 +574,7 @@ export class Inbox extends Component<any, InboxState> {
this.state.mentionsRes.state === "loading" ||
this.state.messagesRes.state === "loading"
) {
return (
<h1 className="h4">
<Spinner large />
</h1>
);
return <CommentsLoadingSkeleton />;
} else {
return (
<div>{this.buildCombined().map(r => this.renderReplyType(r))}</div>
Expand All @@ -588,11 +585,7 @@ export class Inbox extends Component<any, InboxState> {
replies() {
switch (this.state.repliesRes.state) {
case "loading":
return (
<h1 className="h4">
<Spinner large />
</h1>
);
return <CommentsLoadingSkeleton />;
case "success": {
const replies = this.state.repliesRes.data.replies;
return (
Expand Down Expand Up @@ -635,11 +628,7 @@ export class Inbox extends Component<any, InboxState> {
mentions() {
switch (this.state.mentionsRes.state) {
case "loading":
return (
<h1 className="h4">
<Spinner large />
</h1>
);
return <CommentsLoadingSkeleton />;
case "success": {
const mentions = this.state.mentionsRes.data.mentions;
return (
Expand Down Expand Up @@ -685,11 +674,7 @@ export class Inbox extends Component<any, InboxState> {
messages() {
switch (this.state.messagesRes.state) {
case "loading":
return (
<h1 className="h4">
<Spinner large />
</h1>
);
return <CommentsLoadingSkeleton />;
case "success": {
const messages = this.state.messagesRes.data.private_messages;
return (
Expand Down