Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds a loading skeleton to posts, comments and trending communities (#…
…2311) * creates the initial loading skeleton for the home page * initial setup for the trending communities loading skeleton * adds posts loading skeleton to the community page * finishes the creation of all loading skeletons for large devices * finishes loading skeleton for smaller screens * removes unecessary code for the loading skeleton * [loading skeleton] removes unecessary mock code * [loading skeleton] removes custom css classes and adds more bootstrap css classes on the skeleton loading * replaces custom styles with bootstrap classes * rendes only one component for desktop and mobile screens Co-authored-by: SleeplessOne1917 <28871516+SleeplessOne1917@users.noreply.github.com> * fixes lint's indentation problems * transforms span tags into self-closing tags * removes every inline style from the loading-skeleton.tsx file --------- Co-authored-by: SleeplessOne1917 <28871516+SleeplessOne1917@users.noreply.github.com>
- Loading branch information
1 parent
4dbf8fd
commit 72553e4
Showing
5 changed files
with
139 additions
and
47 deletions.
There are no files selected for viewing
Submodule lemmy-translations
updated
7 files
| +2 −3 | translations/bg.json | |
| +1 −2 | translations/en.json | |
| +1 −2 | translations/eo.json | |
| +1 −2 | translations/es.json | |
| +2 −5 | translations/gl.json | |
| +2 −4 | translations/nl.json | |
| +1 −3 | translations/zh.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { Component } from "inferno"; | ||
|
|
||
| interface LoadingSkeletonProps { | ||
| itemCount?: number; | ||
| } | ||
|
|
||
| interface LoadingSkeletonLineProps { | ||
| size: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; | ||
| } | ||
|
|
||
| class LoadingSkeletonLine extends Component<LoadingSkeletonLineProps, any> { | ||
| render() { | ||
| const className = "placeholder placeholder-lg col-" + this.props.size; | ||
| return ( | ||
| <p className="placeholder-glow m-0"> | ||
| <span className={`${className} h-100`} /> | ||
| </p> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export class PostsLoadingSkeleton extends Component<LoadingSkeletonProps, any> { | ||
| render() { | ||
| return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => ( | ||
| <PostsLoadingSkeletonItem key={index} /> | ||
| )); | ||
| } | ||
| } | ||
|
|
||
| class PostThumbnailLoadingSkeleton extends Component<any, any> { | ||
| render() { | ||
| return ( | ||
| <div className="thumbnail rounded d-flex justify-content-center placeholder-glow"> | ||
| <span className="placeholder placeholder-lg h-100 w-100 rounded" /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class PostsLoadingSkeletonItem extends Component<any, any> { | ||
| render() { | ||
| return ( | ||
| <div className="my-3"> | ||
| <div className="col flex-grow-1"> | ||
| <div className="row"> | ||
| <div className="col flex-grow-0 order-last order-sm-first"> | ||
| <PostThumbnailLoadingSkeleton /> | ||
| </div> | ||
| <div className="col flex-grow-1"> | ||
| <LoadingSkeletonLine size={12} /> | ||
| <LoadingSkeletonLine size={8} /> | ||
| <LoadingSkeletonLine size={4} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export class TrendingCommunitiesLoadingSkeleton extends Component< | ||
| LoadingSkeletonProps, | ||
| any | ||
| > { | ||
| render() { | ||
| return ( | ||
| <div className="mb-2"> | ||
| {Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => ( | ||
| <TrendingCommunitiesLoadingSkeletonItem key={index} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> { | ||
| render() { | ||
| return ( | ||
| <div className="col flex-grow-1 mt-2 ps-2 pe-4"> | ||
| <div className="row"> | ||
| <div className="col flex-grow-0 pe-0"> | ||
| <div className="d-flex placeholder-glow img-icon"> | ||
| <span className="placeholder placeholder-lg w-100 h-100 rounded-circle" /> | ||
| </div> | ||
| </div> | ||
| <div className="col flex-grow-1 pe-0"> | ||
| <LoadingSkeletonLine size={12} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export class CommentsLoadingSkeleton extends Component<any, any> { | ||
| render() { | ||
| return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => ( | ||
| <CommentsLoadingSkeletonItem key={index} /> | ||
| )); | ||
| } | ||
| } | ||
|
|
||
| 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"> | ||
| <LoadingSkeletonLine size={6} /> | ||
| <LoadingSkeletonLine size={12} /> | ||
| <LoadingSkeletonLine size={7} /> | ||
| <LoadingSkeletonLine size={4} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters