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

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

Merged
merged 17 commits into from
Mar 27, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[loading skeleton] removes custom css classes and adds more bootstrap… 
… css classes on the skeleton loading
  • Loading branch information
@rodrigo-fm
rodrigo-fm committed Jan 11, 2024
commit 843e569a2fee3d12cda9aaa1d1b44c433e25c767
31 changes: 0 additions & 31 deletions src/assets/css/loading-skeleton.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/shared/components/app/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,3 @@
@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"
145 changes: 54 additions & 91 deletions src/shared/components/common/loading-skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,46 @@
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;
interface LoadingSkeletonLineProps {
size: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
}

export class PostsLoadingSkeleton extends Component<LoadingSkeletonProps, any> {
private theme: string = dataBsTheme(setIsoData(this.context).site_res);
class LoadingSkeletonLine extends Component<LoadingSkeletonLineProps, any> {
render() {
const className = "placeholder placeholder-lg col-" + this.props.size;
return (
<p className="placeholder-glow" style={{ margin: "0" }}>
<span className={className} style={{ height: "1.3rem" }}></span>
</p>
);
}
}

export class PostsLoadingSkeleton extends Component<LoadingSkeletonProps, any> {
render() {
return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (
<PostsLoadingSkeletonItem key={index} theme={this.theme} />
<PostsLoadingSkeletonItem key={index} />
));
}
}

class PostThumbnailLoadingSkeleton extends Component<
LoadingSkeletonItemProps,
any
> {
class PostThumbnailLoadingSkeleton extends Component<any, any> {
render() {
return (
<div
className="thumbnail rounded d-flex justify-content-center skeleton-pulse"
data-bs-theme={this.props.theme}
></div>
<div className="thumbnail rounded d-flex justify-content-center placeholder-glow">
<span
className="placeholder placeholder-lg"
style={{ height: "100%", width: "100%", "border-radius": "0.5rem" }}
></span>
</div>
);
}
}

class PostsLoadingSkeletonItem extends Component<
LoadingSkeletonItemProps,
any
> {
class PostsLoadingSkeletonItem extends Component<any, any> {
render() {
return (
<>
Expand All @@ -46,45 +49,27 @@ class PostsLoadingSkeletonItem extends Component<
<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>
<LoadingSkeletonLine size={12} />
<LoadingSkeletonLine size={8} />
<LoadingSkeletonLine size={6} />
</div>
<div className="col flex-grow-0">
<PostThumbnailLoadingSkeleton theme={this.props.theme} />
<PostThumbnailLoadingSkeleton />
</div>
</div>
</div>
</div>
{/* desktop */}
<div className="d-none d-sm-block">
<div className="col flex-grow-1 mt-2">
<div className="d-none d-sm-block my-3">
<div className="col flex-grow-1">
<div className="row">
<div className="col flex-grow-0">
<PostThumbnailLoadingSkeleton theme={this.props.theme} />
<PostThumbnailLoadingSkeleton />
</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>
<LoadingSkeletonLine size={12} />
<LoadingSkeletonLine size={8} />
<LoadingSkeletonLine size={4} />
</div>
</div>
</div>
Expand All @@ -98,26 +83,18 @@ 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}
/>
<TrendingCommunitiesLoadingSkeletonItem key={index} />
))}
</div>
);
}
}

class TrendingCommunitiesLoadingSkeletonItem extends Component<
LoadingSkeletonItemProps,
any
> {
class TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> {
render() {
return (
<div
Expand All @@ -130,60 +107,46 @@ class TrendingCommunitiesLoadingSkeletonItem extends Component<
<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>
className="d-flex placeholder-glow"
style={{ width: "1.5rem", height: "1.5rem" }}
>
<span
className="placeholder placeholder-lg"
style={{
height: "100%",
width: "100%",
"border-radius": "100%",
}}
></span>
</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>
<LoadingSkeletonLine size={12} />
</div>
</div>
</div>
);
}
}

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

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

class CommentsLoadingSkeletonItem extends Component<
LoadingSkeletonItemProps,
any
> {
class CommentsLoadingSkeletonItem extends Component<any, 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>
<LoadingSkeletonLine size={6} />
<LoadingSkeletonLine size={12} />
<LoadingSkeletonLine size={7} />
<LoadingSkeletonLine size={4} />
</div>
</div>
</div>
Expand Down