From 7880be72c4ea0216d145c8bb2dff5c7b8dd7fb8b Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Mon, 1 Jan 2024 14:59:45 -0300
Subject: [PATCH 01/13] creates the initial loading skeleton for the home page

---
 src/assets/css/loading-skeleton.css           | 20 +++++
 src/shared/components/app/styles.scss         |  1 +
 .../components/common/loading-skeleton.tsx    | 50 +++++++++++++
 src/shared/components/home/home.tsx           | 74 +++++++++----------
 4 files changed, 108 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/css/loading-skeleton.css
 create mode 100644 src/shared/components/common/loading-skeleton.tsx

diff --git a/src/assets/css/loading-skeleton.css b/src/assets/css/loading-skeleton.css
new file mode 100644
index 000000000..5aa2317c9
--- /dev/null
+++ b/src/assets/css/loading-skeleton.css
@@ -0,0 +1,20 @@
+.skeleton-pulse {
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+
+.post-line-loading-skeleton {
+  height: 1.5rem;
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+
+/* TODO: animation should have different colors for the bright theme */
+@keyframes skeleton-loading {
+  0% {
+    background-color: #444;
+  }
+
+  100% {
+    background-color: #6a6a6a;
+  }
+}
diff --git a/src/shared/components/app/styles.scss b/src/shared/components/app/styles.scss
index 559f619ff..d0043d3bb 100644
--- a/src/shared/components/app/styles.scss
+++ b/src/shared/components/app/styles.scss
@@ -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"
diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
new file mode 100644
index 000000000..b9283a8f1
--- /dev/null
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -0,0 +1,50 @@
+import { Component } from "inferno";
+
+interface LoadingSkeletonProps {
+  itemCount: number;
+}
+
+export class LoadingPostsSkeleton extends Component<LoadingSkeletonProps, any> {
+  render() {
+    return Array.from({ length: this.props.itemCount }, (_, index) => (
+      <LoadingPostsSkeletonItem key={index} />
+    ));
+  }
+}
+
+class ThumbnailLoadingSkeleton extends Component<any, any> {
+  render() {
+    return (
+      <div className="thumbnail rounded d-flex justify-content-center skeleton-pulse"></div>
+    );
+  }
+}
+
+class LoadingPostsSkeletonItem extends Component<any, any> {
+  render() {
+    {
+      /* TODO: The mobile view*/
+    }
+    {
+      /* The larger view*/
+    }
+    return (
+      <div className="mt-2">
+        <div className="d-none d-sm-block">
+          <div className="col flex-grow-1">
+            <div className="row">
+              <div className="col flex-grow-0">
+                <ThumbnailLoadingSkeleton />
+              </div>
+              <div className="col flex-grow-1">
+                <div className="col-12 post-line-loading-skeleton skeleton-pulse"></div>
+                <div className="col-8 post-line-loading-skeleton skeleton-pulse"></div>
+                <div className="col-4 post-line-loading-skeleton skeleton-pulse"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 8e758d38b..f5613cf06 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -4,7 +4,7 @@ import {
   editPost,
   editWith,
   enableDownvotes,
-  enableNsfw,
+  // enableNsfw,
   getCommentParentId,
   getDataTypeString,
   myAuth,
@@ -96,10 +96,11 @@ import { Icon, Spinner } 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 { PostListings } from "../post/post-listings";
 import { SiteSidebar } from "./site-sidebar";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
+import { LoadingPostsSkeleton } from "../common/loading-skeleton";
 
 interface HomeState {
   postsRes: RequestState<GetPostsResponse>;
@@ -681,44 +682,43 @@ export class Home extends Component<any, HomeState> {
 
     if (dataType === DataType.Post) {
       switch (this.state.postsRes?.state) {
+        // TODO: check if I can merge "empty" and "loading" state on the case 'case' clause
         case "empty":
-          return <div style="min-height: 20000px;"></div>;
+          return <LoadingPostsSkeleton itemCount={10} />;
         case "loading":
-          return (
-            <h5>
-              <Spinner large />
-            </h5>
-          );
+          return <LoadingPostsSkeleton itemCount={10} />;
         case "success": {
-          const posts = this.state.postsRes.data.posts;
-          return (
-            <PostListings
-              posts={posts}
-              showCommunity
-              removeDuplicates
-              enableDownvotes={enableDownvotes(siteRes)}
-              enableNsfw={enableNsfw(siteRes)}
-              allLanguages={siteRes.all_languages}
-              siteLanguages={siteRes.discussion_languages}
-              onBlockPerson={this.handleBlockPerson}
-              onPostEdit={this.handlePostEdit}
-              onPostVote={this.handlePostVote}
-              onPostReport={this.handlePostReport}
-              onLockPost={this.handleLockPost}
-              onDeletePost={this.handleDeletePost}
-              onRemovePost={this.handleRemovePost}
-              onSavePost={this.handleSavePost}
-              onPurgePerson={this.handlePurgePerson}
-              onPurgePost={this.handlePurgePost}
-              onBanPerson={this.handleBanPerson}
-              onBanPersonFromCommunity={this.handleBanFromCommunity}
-              onAddModToCommunity={this.handleAddModToCommunity}
-              onAddAdmin={this.handleAddAdmin}
-              onTransferCommunity={this.handleTransferCommunity}
-              onFeaturePost={this.handleFeaturePost}
-              onMarkPostAsRead={async () => {}}
-            />
-          );
+          return <LoadingPostsSkeleton itemCount={10} />;
+          // TODO: uncomment this and find a way to mock a loading time to see if it's displaying properly
+          // const posts = this.state.postsRes.data.posts;
+          // return (
+          //   <PostListings
+          //     posts={posts}
+          //     showCommunity
+          //     removeDuplicates
+          //     enableDownvotes={enableDownvotes(siteRes)}
+          //     enableNsfw={enableNsfw(siteRes)}
+          //     allLanguages={siteRes.all_languages}
+          //     siteLanguages={siteRes.discussion_languages}
+          //     onBlockPerson={this.handleBlockPerson}
+          //     onPostEdit={this.handlePostEdit}
+          //     onPostVote={this.handlePostVote}
+          //     onPostReport={this.handlePostReport}
+          //     onLockPost={this.handleLockPost}
+          //     onDeletePost={this.handleDeletePost}
+          //     onRemovePost={this.handleRemovePost}
+          //     onSavePost={this.handleSavePost}
+          //     onPurgePerson={this.handlePurgePerson}
+          //     onPurgePost={this.handlePurgePost}
+          //     onBanPerson={this.handleBanPerson}
+          //     onBanPersonFromCommunity={this.handleBanFromCommunity}
+          //     onAddModToCommunity={this.handleAddModToCommunity}
+          //     onAddAdmin={this.handleAddAdmin}
+          //     onTransferCommunity={this.handleTransferCommunity}
+          //     onFeaturePost={this.handleFeaturePost}
+          //     onMarkPostAsRead={async () => {}}
+          //   />
+          // );
         }
       }
     } else {

From 4fb2ea0ee13189f5ab8cba1f107c9a1d4e6c82b5 Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Mon, 1 Jan 2024 20:09:29 -0300
Subject: [PATCH 02/13] initial setup for the trending communities loading
 skeleton

---
 src/assets/css/loading-skeleton.css           |   2 +
 .../components/common/loading-skeleton.tsx    |  70 ++++++++---
 src/shared/components/home/home.tsx           | 114 +++++++++---------
 3 files changed, 112 insertions(+), 74 deletions(-)

diff --git a/src/assets/css/loading-skeleton.css b/src/assets/css/loading-skeleton.css
index 5aa2317c9..cd4aa9218 100644
--- a/src/assets/css/loading-skeleton.css
+++ b/src/assets/css/loading-skeleton.css
@@ -9,6 +9,8 @@
 }
 
 /* TODO: animation should have different colors for the bright theme */
+/*  should be something like [data-bs-theme=dark] { } */
+/*  also, maybe you shouldn't animate the background-color, but rather the opacity */
 @keyframes skeleton-loading {
   0% {
     background-color: #444;
diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index b9283a8f1..4c47008ad 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -1,18 +1,21 @@
 import { Component } from "inferno";
 
-interface LoadingSkeletonProps {
+interface PostsLoadingSkeletonProps {
   itemCount: number;
 }
 
-export class LoadingPostsSkeleton extends Component<LoadingSkeletonProps, any> {
+export class PostsLoadingSkeleton extends Component<
+  PostsLoadingSkeletonProps,
+  any
+> {
   render() {
     return Array.from({ length: this.props.itemCount }, (_, index) => (
-      <LoadingPostsSkeletonItem key={index} />
+      <PostsLoadingSkeletonItem key={index} />
     ));
   }
 }
 
-class ThumbnailLoadingSkeleton extends Component<any, any> {
+class PostThumbnailLoadingSkeleton extends Component<any, any> {
   render() {
     return (
       <div className="thumbnail rounded d-flex justify-content-center skeleton-pulse"></div>
@@ -20,7 +23,7 @@ class ThumbnailLoadingSkeleton extends Component<any, any> {
   }
 }
 
-class LoadingPostsSkeletonItem extends Component<any, any> {
+class PostsLoadingSkeletonItem extends Component<any, any> {
   render() {
     {
       /* TODO: The mobile view*/
@@ -29,22 +32,55 @@ class LoadingPostsSkeletonItem extends Component<any, any> {
       /* The larger view*/
     }
     return (
-      <div className="mt-2">
-        <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 />
+          </div>
           <div className="col flex-grow-1">
-            <div className="row">
-              <div className="col flex-grow-0">
-                <ThumbnailLoadingSkeleton />
-              </div>
-              <div className="col flex-grow-1">
-                <div className="col-12 post-line-loading-skeleton skeleton-pulse"></div>
-                <div className="col-8 post-line-loading-skeleton skeleton-pulse"></div>
-                <div className="col-4 post-line-loading-skeleton skeleton-pulse"></div>
-              </div>
-            </div>
+            <div className="col-12 post-line-loading-skeleton skeleton-pulse"></div>
+            <div className="col-8 post-line-loading-skeleton skeleton-pulse"></div>
+            <div className="col-4 post-line-loading-skeleton skeleton-pulse"></div>
           </div>
         </div>
       </div>
     );
   }
 }
+
+interface TrendingCommunitiesLoadingSkeletonProps {
+  itemCount: number;
+}
+
+export class TrendingCommunitiesLoadingSkeleton extends Component<
+  TrendingCommunitiesLoadingSkeletonProps,
+  any
+> {
+  render() {
+    return Array.from({ length: this.props.itemCount }, (_, index) => (
+      <TrendingCommunitiesLoadingSkeletonItem key={index} />
+    ));
+  }
+}
+
+class TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> {
+  render() {
+    {
+      /* TODO: The mobile view*/
+    }
+    {
+      /* The larger view*/
+    }
+    return (
+      <div className="flex-grow-1 mt-2 col">
+        <div className="row">
+          <div
+            className="col flex-grow-0 post-line-loading-skeleton skeleton-pulse"
+            style={{ "border-radius": "100px" }}
+          ></div>
+          <div className="col flex-grow-1 post-line-loading-skeleton skeleton-pulse"></div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index f5613cf06..86d6d6d49 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -18,7 +18,7 @@ import {
   getQueryString,
   getRandomFromList,
 } from "@utils/helpers";
-import { canCreateCommunity } from "@utils/roles";
+// import { canCreateCommunity } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
 import { NoOptionI18nKeys } from "i18next";
@@ -100,7 +100,10 @@ import { CommunityLink } from "../community/community-link";
 import { SiteSidebar } from "./site-sidebar";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
-import { LoadingPostsSkeleton } from "../common/loading-skeleton";
+import {
+  PostsLoadingSkeleton,
+  TrendingCommunitiesLoadingSkeleton,
+} from "../common/loading-skeleton";
 
 interface HomeState {
   postsRes: RequestState<GetPostsResponse>;
@@ -213,17 +216,17 @@ const MobileButton = ({
   </button>
 );
 
-const LinkButton = ({
-  path,
-  translationKey,
-}: {
-  path: string;
-  translationKey: NoOptionI18nKeys;
-}) => (
-  <Link className="btn btn-secondary d-block" to={path}>
-    {I18NextService.i18n.t(translationKey)}
-  </Link>
-);
+// const LinkButton = ({
+//   path,
+//   translationKey,
+// }: {
+//   path: string;
+//   translationKey: NoOptionI18nKeys;
+// }) => (
+//   <Link className="btn btn-secondary d-block" to={path}>
+//     {I18NextService.i18n.t(translationKey)}
+//   </Link>
+// );
 
 export class Home extends Component<any, HomeState> {
   private isoData = setIsoData<HomeData>(this.context);
@@ -512,48 +515,45 @@ 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 (
-          <>
-            <header className="card-header d-flex align-items-center">
-              <h5 className="mb-0">
-                <T i18nKey="trending_communities">
-                  #
-                  <Link className="text-body" to="/communities">
-                    #
-                  </Link>
-                </T>
-              </h5>
-            </header>
-            <div className="card-body">
-              {trending.length > 0 && (
-                <ul className="list-inline">
-                  {trending.map(cv => (
-                    <li key={cv.community.id} className="list-inline-item">
-                      <CommunityLink community={cv.community} />
-                    </li>
-                  ))}
-                </ul>
-              )}
-              {canCreateCommunity(this.state.siteRes) && (
-                <LinkButton
-                  path="/create_community"
-                  translationKey="create_a_community"
-                />
-              )}
-              <LinkButton
-                path="/communities"
-                translationKey="explore_communities"
-              />
-            </div>
-          </>
-        );
+        return <TrendingCommunitiesLoadingSkeleton itemCount={5} />;
+        // const trending = this.state.trendingCommunitiesRes.data.communities;
+        // return (
+        //   <>
+        //     <header className="card-header d-flex align-items-center">
+        //       <h5 className="mb-0">
+        //         <T i18nKey="trending_communities">
+        //           #
+        //           <Link className="text-body" to="/communities">
+        //             #
+        //           </Link>
+        //         </T>
+        //       </h5>
+        //     </header>
+        //     <div className="card-body">
+        //       {trending.length > 0 && (
+        //         <ul className="list-inline">
+        //           {trending.map(cv => (
+        //             <li key={cv.community.id} className="list-inline-item">
+        //               <CommunityLink community={cv.community} />
+        //             </li>
+        //           ))}
+        //         </ul>
+        //       )}
+        //       {canCreateCommunity(this.state.siteRes) && (
+        //         <LinkButton
+        //           path="/create_community"
+        //           translationKey="create_a_community"
+        //         />
+        //       )}
+        //       <LinkButton
+        //         path="/communities"
+        //         translationKey="explore_communities"
+        //       />
+        //     </div>
+        //   </>
+        // );
       }
     }
   }
@@ -684,11 +684,11 @@ export class Home extends Component<any, HomeState> {
       switch (this.state.postsRes?.state) {
         // TODO: check if I can merge "empty" and "loading" state on the case 'case' clause
         case "empty":
-          return <LoadingPostsSkeleton itemCount={10} />;
+          return <PostsLoadingSkeleton itemCount={10} />;
         case "loading":
-          return <LoadingPostsSkeleton itemCount={10} />;
+          return <PostsLoadingSkeleton itemCount={10} />;
         case "success": {
-          return <LoadingPostsSkeleton itemCount={10} />;
+          return <PostsLoadingSkeleton itemCount={10} />;
           // TODO: uncomment this and find a way to mock a loading time to see if it's displaying properly
           // const posts = this.state.postsRes.data.posts;
           // return (

From 480ef156cd9e3f26fe7fb1142f00aa2036f64c67 Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Mon, 1 Jan 2024 20:28:31 -0300
Subject: [PATCH 03/13] adds posts loading skeleton to the community page

---
 src/shared/components/community/community.tsx | 64 +++++++++----------
 src/shared/components/home/home.tsx           | 64 +++++++++----------
 2 files changed, 62 insertions(+), 66 deletions(-)

diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index e690fb125..718547977 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -97,10 +97,11 @@ import { Icon, Spinner } from "../common/icon";
 import { SortSelect } from "../common/sort-select";
 import { Sidebar } from "../community/sidebar";
 import { SiteSidebar } from "../home/site-sidebar";
-import { PostListings } from "../post/post-listings";
+// import { PostListings } from "../post/post-listings";
 import { CommunityLink } from "./community-link";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
+import { PostsLoadingSkeleton } from "../common/loading-skeleton";
 
 type CommunityData = RouteDataResponse<{
   communityRes: GetCommunityResponse;
@@ -417,39 +418,36 @@ export class Community extends Component<
     if (dataType === DataType.Post) {
       switch (this.state.postsRes.state) {
         case "loading":
-          return (
-            <h5>
-              <Spinner large />
-            </h5>
-          );
+          return <PostsLoadingSkeleton itemCount={10} />;
         case "success":
-          return (
-            <PostListings
-              posts={this.state.postsRes.data.posts}
-              removeDuplicates
-              enableDownvotes={enableDownvotes(site_res)}
-              enableNsfw={enableNsfw(site_res)}
-              allLanguages={site_res.all_languages}
-              siteLanguages={site_res.discussion_languages}
-              onBlockPerson={this.handleBlockPerson}
-              onPostEdit={this.handlePostEdit}
-              onPostVote={this.handlePostVote}
-              onPostReport={this.handlePostReport}
-              onLockPost={this.handleLockPost}
-              onDeletePost={this.handleDeletePost}
-              onRemovePost={this.handleRemovePost}
-              onSavePost={this.handleSavePost}
-              onPurgePerson={this.handlePurgePerson}
-              onPurgePost={this.handlePurgePost}
-              onBanPerson={this.handleBanPerson}
-              onBanPersonFromCommunity={this.handleBanFromCommunity}
-              onAddModToCommunity={this.handleAddModToCommunity}
-              onAddAdmin={this.handleAddAdmin}
-              onTransferCommunity={this.handleTransferCommunity}
-              onFeaturePost={this.handleFeaturePost}
-              onMarkPostAsRead={async () => {}}
-            />
-          );
+          return <PostsLoadingSkeleton itemCount={10} />;
+        // return (
+        //   <PostListings
+        //     posts={this.state.postsRes.data.posts}
+        //     removeDuplicates
+        //     enableDownvotes={enableDownvotes(site_res)}
+        //     enableNsfw={enableNsfw(site_res)}
+        //     allLanguages={site_res.all_languages}
+        //     siteLanguages={site_res.discussion_languages}
+        //     onBlockPerson={this.handleBlockPerson}
+        //     onPostEdit={this.handlePostEdit}
+        //     onPostVote={this.handlePostVote}
+        //     onPostReport={this.handlePostReport}
+        //     onLockPost={this.handleLockPost}
+        //     onDeletePost={this.handleDeletePost}
+        //     onRemovePost={this.handleRemovePost}
+        //     onSavePost={this.handleSavePost}
+        //     onPurgePerson={this.handlePurgePerson}
+        //     onPurgePost={this.handlePurgePost}
+        //     onBanPerson={this.handleBanPerson}
+        //     onBanPersonFromCommunity={this.handleBanFromCommunity}
+        //     onAddModToCommunity={this.handleAddModToCommunity}
+        //     onAddAdmin={this.handleAddAdmin}
+        //     onTransferCommunity={this.handleTransferCommunity}
+        //     onFeaturePost={this.handleFeaturePost}
+        //     onMarkPostAsRead={async () => {}}
+        //   />
+        // );
       }
     } else {
       switch (this.state.commentsRes.state) {
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 86d6d6d49..96a597282 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -4,7 +4,7 @@ import {
   editPost,
   editWith,
   enableDownvotes,
-  // enableNsfw,
+  enableNsfw,
   getCommentParentId,
   getDataTypeString,
   myAuth,
@@ -96,7 +96,7 @@ import { Icon, Spinner } 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 { PostListings } from "../post/post-listings";
 import { SiteSidebar } from "./site-sidebar";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
@@ -688,37 +688,35 @@ export class Home extends Component<any, HomeState> {
         case "loading":
           return <PostsLoadingSkeleton itemCount={10} />;
         case "success": {
-          return <PostsLoadingSkeleton itemCount={10} />;
-          // TODO: uncomment this and find a way to mock a loading time to see if it's displaying properly
-          // const posts = this.state.postsRes.data.posts;
-          // return (
-          //   <PostListings
-          //     posts={posts}
-          //     showCommunity
-          //     removeDuplicates
-          //     enableDownvotes={enableDownvotes(siteRes)}
-          //     enableNsfw={enableNsfw(siteRes)}
-          //     allLanguages={siteRes.all_languages}
-          //     siteLanguages={siteRes.discussion_languages}
-          //     onBlockPerson={this.handleBlockPerson}
-          //     onPostEdit={this.handlePostEdit}
-          //     onPostVote={this.handlePostVote}
-          //     onPostReport={this.handlePostReport}
-          //     onLockPost={this.handleLockPost}
-          //     onDeletePost={this.handleDeletePost}
-          //     onRemovePost={this.handleRemovePost}
-          //     onSavePost={this.handleSavePost}
-          //     onPurgePerson={this.handlePurgePerson}
-          //     onPurgePost={this.handlePurgePost}
-          //     onBanPerson={this.handleBanPerson}
-          //     onBanPersonFromCommunity={this.handleBanFromCommunity}
-          //     onAddModToCommunity={this.handleAddModToCommunity}
-          //     onAddAdmin={this.handleAddAdmin}
-          //     onTransferCommunity={this.handleTransferCommunity}
-          //     onFeaturePost={this.handleFeaturePost}
-          //     onMarkPostAsRead={async () => {}}
-          //   />
-          // );
+          const posts = this.state.postsRes.data.posts;
+          return (
+            <PostListings
+              posts={posts}
+              showCommunity
+              removeDuplicates
+              enableDownvotes={enableDownvotes(siteRes)}
+              enableNsfw={enableNsfw(siteRes)}
+              allLanguages={siteRes.all_languages}
+              siteLanguages={siteRes.discussion_languages}
+              onBlockPerson={this.handleBlockPerson}
+              onPostEdit={this.handlePostEdit}
+              onPostVote={this.handlePostVote}
+              onPostReport={this.handlePostReport}
+              onLockPost={this.handleLockPost}
+              onDeletePost={this.handleDeletePost}
+              onRemovePost={this.handleRemovePost}
+              onSavePost={this.handleSavePost}
+              onPurgePerson={this.handlePurgePerson}
+              onPurgePost={this.handlePurgePost}
+              onBanPerson={this.handleBanPerson}
+              onBanPersonFromCommunity={this.handleBanFromCommunity}
+              onAddModToCommunity={this.handleAddModToCommunity}
+              onAddAdmin={this.handleAddAdmin}
+              onTransferCommunity={this.handleTransferCommunity}
+              onFeaturePost={this.handleFeaturePost}
+              onMarkPostAsRead={async () => {}}
+            />
+          );
         }
       }
     } else {

From 50b801fc95e498e1ea907e96b6df00cf205b1cc6 Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Wed, 3 Jan 2024 19:34:28 -0300
Subject: [PATCH 04/13] finishes the creation of all loading skeletons for
 large devices

---
 src/assets/css/loading-skeleton.css           |  34 +++-
 .../components/common/loading-skeleton.tsx    | 151 ++++++++++++++----
 src/shared/components/community/community.tsx |  70 ++++----
 src/shared/components/home/home.tsx           | 109 +++++++------
 src/shared/components/person/inbox.tsx        |  25 +--
 5 files changed, 246 insertions(+), 143 deletions(-)

diff --git a/src/assets/css/loading-skeleton.css b/src/assets/css/loading-skeleton.css
index cd4aa9218..c548687a9 100644
--- a/src/assets/css/loading-skeleton.css
+++ b/src/assets/css/loading-skeleton.css
@@ -1,22 +1,46 @@
-.skeleton-pulse {
-  animation: skeleton-loading 1s linear infinite alternate;
+.skeleton-pulse[data-bs-theme="dark"] {
+  animation: skeleton-loading-dark 1.2s linear infinite alternate;
+}
+
+.skeleton-pulse[data-bs-theme="light"] {
+  animation: skeleton-loading-light 1.2s linear infinite alternate;
+}
+
+.trending-community-icon-skeleton {
+  border-radius: 100%;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .post-line-loading-skeleton {
   height: 1.5rem;
-  border-radius: 4px;
   margin-bottom: 4px;
 }
 
+.comment-loading-skeleton {
+  height: 8rem;
+  margin-bottom: 8px;
+}
+
 /* TODO: animation should have different colors for the bright theme */
 /*  should be something like [data-bs-theme=dark] { } */
 /*  also, maybe you shouldn't animate the background-color, but rather the opacity */
-@keyframes skeleton-loading {
+@keyframes skeleton-loading-dark {
   0% {
     background-color: #444;
   }
 
   100% {
-    background-color: #6a6a6a;
+    background-color: #5f5f5f;
+  }
+}
+
+@keyframes skeleton-loading-light {
+  0% {
+    background-color: #ddd;
+  }
+
+  100% {
+    background-color: #efefef;
   }
 }
diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index 4c47008ad..223e2f609 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -1,29 +1,43 @@
+import { setIsoData } from "@utils/app";
+import dataBsTheme from "@utils/browser/data-bs-theme";
 import { Component } from "inferno";
 
-interface PostsLoadingSkeletonProps {
-  itemCount: number;
+interface LoadingSkeletonProps {
+  itemCount?: number;
 }
 
-export class PostsLoadingSkeleton extends Component<
-  PostsLoadingSkeletonProps,
-  any
-> {
+interface LoadingSkeletonItemProps {
+  theme: string;
+}
+
+export class PostsLoadingSkeleton extends Component<LoadingSkeletonProps, any> {
+  private theme: string = dataBsTheme(setIsoData(this.context).site_res);
+
   render() {
-    return Array.from({ length: this.props.itemCount }, (_, index) => (
-      <PostsLoadingSkeletonItem key={index} />
+    return Array.from({ length: this.props.itemCount ?? 10 }, (_, index) => (
+      <PostsLoadingSkeletonItem key={index} theme={this.theme} />
     ));
   }
 }
 
-class PostThumbnailLoadingSkeleton extends Component<any, any> {
+class PostThumbnailLoadingSkeleton extends Component<
+  LoadingSkeletonItemProps,
+  any
+> {
   render() {
     return (
-      <div className="thumbnail rounded d-flex justify-content-center skeleton-pulse"></div>
+      <div
+        className="thumbnail rounded d-flex justify-content-center skeleton-pulse"
+        data-bs-theme={this.props.theme}
+      ></div>
     );
   }
 }
 
-class PostsLoadingSkeletonItem extends Component<any, any> {
+class PostsLoadingSkeletonItem extends Component<
+  LoadingSkeletonItemProps,
+  any
+> {
   render() {
     {
       /* TODO: The mobile view*/
@@ -35,12 +49,21 @@ class PostsLoadingSkeletonItem extends Component<any, any> {
       <div className="col flex-grow-1 mt-2">
         <div className="row">
           <div className="col flex-grow-0">
-            <PostThumbnailLoadingSkeleton />
+            <PostThumbnailLoadingSkeleton theme={this.props.theme} />
           </div>
           <div className="col flex-grow-1">
-            <div className="col-12 post-line-loading-skeleton skeleton-pulse"></div>
-            <div className="col-8 post-line-loading-skeleton skeleton-pulse"></div>
-            <div className="col-4 post-line-loading-skeleton skeleton-pulse"></div>
+            <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>
@@ -48,22 +71,81 @@ class PostsLoadingSkeletonItem extends Component<any, any> {
   }
 }
 
-interface TrendingCommunitiesLoadingSkeletonProps {
-  itemCount: number;
+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>
+    );
+  }
 }
 
-export class TrendingCommunitiesLoadingSkeleton extends Component<
-  TrendingCommunitiesLoadingSkeletonProps,
+class TrendingCommunitiesLoadingSkeletonItem extends Component<
+  LoadingSkeletonItemProps,
   any
 > {
   render() {
-    return Array.from({ length: this.props.itemCount }, (_, index) => (
-      <TrendingCommunitiesLoadingSkeletonItem key={index} />
+    {
+      /* TODO: The mobile view*/
+    }
+    {
+      /* The larger view*/
+    }
+    return (
+      <div
+        className="col flex-grow-1 mt-2"
+        style={{
+          "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 TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> {
+class CommentsLoadingSkeletonItem extends Component<
+  LoadingSkeletonItemProps,
+  any
+> {
   render() {
     {
       /* TODO: The mobile view*/
@@ -72,13 +154,26 @@ class TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> {
       /* The larger view*/
     }
     return (
-      <div className="flex-grow-1 mt-2 col">
+      <div className="col flex-grow-1 my-2">
         <div className="row">
-          <div
-            className="col flex-grow-0 post-line-loading-skeleton skeleton-pulse"
-            style={{ "border-radius": "100px" }}
-          ></div>
-          <div className="col flex-grow-1 post-line-loading-skeleton skeleton-pulse"></div>
+          <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>
     );
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 718547977..0e6d1c333 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -97,11 +97,14 @@ import { Icon, Spinner } from "../common/icon";
 import { SortSelect } from "../common/sort-select";
 import { Sidebar } from "../community/sidebar";
 import { SiteSidebar } from "../home/site-sidebar";
-// import { PostListings } from "../post/post-listings";
+import { PostListings } from "../post/post-listings";
 import { CommunityLink } from "./community-link";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
-import { PostsLoadingSkeleton } from "../common/loading-skeleton";
+import {
+  CommentsLoadingSkeleton,
+  PostsLoadingSkeleton,
+} from "../common/loading-skeleton";
 
 type CommunityData = RouteDataResponse<{
   communityRes: GetCommunityResponse;
@@ -420,43 +423,38 @@ export class Community extends Component<
         case "loading":
           return <PostsLoadingSkeleton itemCount={10} />;
         case "success":
-          return <PostsLoadingSkeleton itemCount={10} />;
-        // return (
-        //   <PostListings
-        //     posts={this.state.postsRes.data.posts}
-        //     removeDuplicates
-        //     enableDownvotes={enableDownvotes(site_res)}
-        //     enableNsfw={enableNsfw(site_res)}
-        //     allLanguages={site_res.all_languages}
-        //     siteLanguages={site_res.discussion_languages}
-        //     onBlockPerson={this.handleBlockPerson}
-        //     onPostEdit={this.handlePostEdit}
-        //     onPostVote={this.handlePostVote}
-        //     onPostReport={this.handlePostReport}
-        //     onLockPost={this.handleLockPost}
-        //     onDeletePost={this.handleDeletePost}
-        //     onRemovePost={this.handleRemovePost}
-        //     onSavePost={this.handleSavePost}
-        //     onPurgePerson={this.handlePurgePerson}
-        //     onPurgePost={this.handlePurgePost}
-        //     onBanPerson={this.handleBanPerson}
-        //     onBanPersonFromCommunity={this.handleBanFromCommunity}
-        //     onAddModToCommunity={this.handleAddModToCommunity}
-        //     onAddAdmin={this.handleAddAdmin}
-        //     onTransferCommunity={this.handleTransferCommunity}
-        //     onFeaturePost={this.handleFeaturePost}
-        //     onMarkPostAsRead={async () => {}}
-        //   />
-        // );
+          return (
+            <PostListings
+              posts={this.state.postsRes.data.posts}
+              removeDuplicates
+              enableDownvotes={enableDownvotes(site_res)}
+              enableNsfw={enableNsfw(site_res)}
+              allLanguages={site_res.all_languages}
+              siteLanguages={site_res.discussion_languages}
+              onBlockPerson={this.handleBlockPerson}
+              onPostEdit={this.handlePostEdit}
+              onPostVote={this.handlePostVote}
+              onPostReport={this.handlePostReport}
+              onLockPost={this.handleLockPost}
+              onDeletePost={this.handleDeletePost}
+              onRemovePost={this.handleRemovePost}
+              onSavePost={this.handleSavePost}
+              onPurgePerson={this.handlePurgePerson}
+              onPurgePost={this.handlePurgePost}
+              onBanPerson={this.handleBanPerson}
+              onBanPersonFromCommunity={this.handleBanFromCommunity}
+              onAddModToCommunity={this.handleAddModToCommunity}
+              onAddAdmin={this.handleAddAdmin}
+              onTransferCommunity={this.handleTransferCommunity}
+              onFeaturePost={this.handleFeaturePost}
+              onMarkPostAsRead={async () => {}}
+            />
+          );
       }
     } else {
       switch (this.state.commentsRes.state) {
         case "loading":
-          return (
-            <h5>
-              <Spinner large />
-            </h5>
-          );
+          return <CommentsLoadingSkeleton />;
         case "success":
           return (
             <CommentNodes
@@ -597,6 +595,7 @@ export class Community extends Component<
 
     if (dataType === DataType.Post) {
       this.setState({ postsRes: LOADING_REQUEST });
+      await new Promise(resolve => setTimeout(resolve, 6000));
       this.setState({
         postsRes: await HttpService.client.getPosts({
           page_cursor: pageCursor,
@@ -609,6 +608,7 @@ export class Community extends Component<
       });
     } else {
       this.setState({ commentsRes: LOADING_REQUEST });
+      await new Promise(resolve => setTimeout(resolve, 6000));
       this.setState({
         commentsRes: await HttpService.client.getComments({
           limit: fetchLimit,
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 96a597282..4cdb37489 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -18,7 +18,7 @@ import {
   getQueryString,
   getRandomFromList,
 } from "@utils/helpers";
-// import { canCreateCommunity } from "@utils/roles";
+import { canCreateCommunity } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
 import { NoOptionI18nKeys } from "i18next";
@@ -92,7 +92,7 @@ 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";
@@ -101,6 +101,7 @@ import { SiteSidebar } from "./site-sidebar";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
 import {
+  CommentsLoadingSkeleton,
   PostsLoadingSkeleton,
   TrendingCommunitiesLoadingSkeleton,
 } from "../common/loading-skeleton";
@@ -216,17 +217,17 @@ const MobileButton = ({
   </button>
 );
 
-// const LinkButton = ({
-//   path,
-//   translationKey,
-// }: {
-//   path: string;
-//   translationKey: NoOptionI18nKeys;
-// }) => (
-//   <Link className="btn btn-secondary d-block" to={path}>
-//     {I18NextService.i18n.t(translationKey)}
-//   </Link>
-// );
+const LinkButton = ({
+  path,
+  translationKey,
+}: {
+  path: string;
+  translationKey: NoOptionI18nKeys;
+}) => (
+  <Link className="btn btn-secondary d-block" to={path}>
+    {I18NextService.i18n.t(translationKey)}
+  </Link>
+);
 
 export class Home extends Component<any, HomeState> {
   private isoData = setIsoData<HomeData>(this.context);
@@ -517,43 +518,42 @@ export class Home extends Component<any, HomeState> {
       case "loading":
         return <TrendingCommunitiesLoadingSkeleton itemCount={5} />;
       case "success": {
-        return <TrendingCommunitiesLoadingSkeleton itemCount={5} />;
-        // const trending = this.state.trendingCommunitiesRes.data.communities;
-        // return (
-        //   <>
-        //     <header className="card-header d-flex align-items-center">
-        //       <h5 className="mb-0">
-        //         <T i18nKey="trending_communities">
-        //           #
-        //           <Link className="text-body" to="/communities">
-        //             #
-        //           </Link>
-        //         </T>
-        //       </h5>
-        //     </header>
-        //     <div className="card-body">
-        //       {trending.length > 0 && (
-        //         <ul className="list-inline">
-        //           {trending.map(cv => (
-        //             <li key={cv.community.id} className="list-inline-item">
-        //               <CommunityLink community={cv.community} />
-        //             </li>
-        //           ))}
-        //         </ul>
-        //       )}
-        //       {canCreateCommunity(this.state.siteRes) && (
-        //         <LinkButton
-        //           path="/create_community"
-        //           translationKey="create_a_community"
-        //         />
-        //       )}
-        //       <LinkButton
-        //         path="/communities"
-        //         translationKey="explore_communities"
-        //       />
-        //     </div>
-        //   </>
-        // );
+        const trending = this.state.trendingCommunitiesRes.data.communities;
+        return (
+          <>
+            <header className="card-header d-flex align-items-center">
+              <h5 className="mb-0">
+                <T i18nKey="trending_communities">
+                  #
+                  <Link className="text-body" to="/communities">
+                    #
+                  </Link>
+                </T>
+              </h5>
+            </header>
+            <div className="card-body">
+              {trending.length > 0 && (
+                <ul className="list-inline">
+                  {trending.map(cv => (
+                    <li key={cv.community.id} className="list-inline-item">
+                      <CommunityLink community={cv.community} />
+                    </li>
+                  ))}
+                </ul>
+              )}
+              {canCreateCommunity(this.state.siteRes) && (
+                <LinkButton
+                  path="/create_community"
+                  translationKey="create_a_community"
+                />
+              )}
+              <LinkButton
+                path="/communities"
+                translationKey="explore_communities"
+              />
+            </div>
+          </>
+        );
       }
     }
   }
@@ -722,11 +722,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 (
@@ -802,6 +798,7 @@ export class Home extends Component<any, HomeState> {
 
   async fetchTrendingCommunities() {
     this.setState({ trendingCommunitiesRes: LOADING_REQUEST });
+    await new Promise(resolve => setTimeout(resolve, 3000));
     this.setState({
       trendingCommunitiesRes: await HttpService.client.listCommunities({
         type_: "Local",
@@ -816,6 +813,7 @@ export class Home extends Component<any, HomeState> {
 
     if (dataType === DataType.Post) {
       this.setState({ postsRes: LOADING_REQUEST });
+      await new Promise(resolve => setTimeout(resolve, 3000));
       this.setState({
         postsRes: await HttpService.client.getPosts({
           page_cursor: pageCursor,
@@ -827,6 +825,7 @@ export class Home extends Component<any, HomeState> {
       });
     } else {
       this.setState({ commentsRes: LOADING_REQUEST });
+      await new Promise(resolve => setTimeout(resolve, 3000));
       this.setState({
         commentsRes: await HttpService.client.getComments({
           limit: fetchLimit,
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 3af065c5b..8347d7120 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -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,
@@ -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>
@@ -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 (
@@ -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 (
@@ -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 (

From b9e6e4fd339b572380ca6d8e7501d0e63906b6ee Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Thu, 4 Jan 2024 21:53:36 -0300
Subject: [PATCH 05/13] finishes loading skeleton for smaller screens

---
 .../components/common/loading-skeleton.tsx    | 126 ++++++++++--------
 1 file changed, 71 insertions(+), 55 deletions(-)

diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index 223e2f609..d9c657e48 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -39,34 +39,57 @@ class PostsLoadingSkeletonItem extends Component<
   any
 > {
   render() {
-    {
-      /* TODO: The mobile view*/
-    }
-    {
-      /* The larger view*/
-    }
     return (
-      <div className="col flex-grow-1 mt-2">
-        <div className="row">
-          <div className="col flex-grow-0">
-            <PostThumbnailLoadingSkeleton theme={this.props.theme} />
+      <>
+        {/* 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 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>
+        {/* 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>
-      </div>
+      </>
     );
   }
 }
@@ -96,12 +119,6 @@ class TrendingCommunitiesLoadingSkeletonItem extends Component<
   any
 > {
   render() {
-    {
-      /* TODO: The mobile view*/
-    }
-    {
-      /* The larger view*/
-    }
     return (
       <div
         className="col flex-grow-1 mt-2"
@@ -147,32 +164,31 @@ class CommentsLoadingSkeletonItem extends Component<
   any
 > {
   render() {
-    {
-      /* TODO: The mobile view*/
-    }
-    {
-      /* The larger view*/
-    }
     return (
-      <div className="col flex-grow-1 my-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
+        className="my-2"
+        style={{ padding: "0.5rem", "background-color": "#333" }}
+      >
+        <div className="col flex-grow-1">
+          <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>
       </div>

From 61f1d1ce5355b49cffc85be777b490b372997efe Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Sun, 7 Jan 2024 10:08:51 -0300
Subject: [PATCH 06/13] removes unecessary code for the loading skeleton

---
 src/assets/css/loading-skeleton.css           | 33 ++++----------
 .../components/common/loading-skeleton.tsx    | 43 ++++++++-----------
 2 files changed, 28 insertions(+), 48 deletions(-)

diff --git a/src/assets/css/loading-skeleton.css b/src/assets/css/loading-skeleton.css
index c548687a9..9b7f8090d 100644
--- a/src/assets/css/loading-skeleton.css
+++ b/src/assets/css/loading-skeleton.css
@@ -1,9 +1,13 @@
+.skeleton-pulse {
+  animation: skeleton-loading 1.2s linear infinite alternate;
+}
+
 .skeleton-pulse[data-bs-theme="dark"] {
-  animation: skeleton-loading-dark 1.2s linear infinite alternate;
+  background-color: #5a5a5a;
 }
 
 .skeleton-pulse[data-bs-theme="light"] {
-  animation: skeleton-loading-light 1.2s linear infinite alternate;
+  background-color: #dadada;
 }
 
 .trending-community-icon-skeleton {
@@ -16,31 +20,12 @@
   height: 1.5rem;
   margin-bottom: 4px;
 }
-
-.comment-loading-skeleton {
-  height: 8rem;
-  margin-bottom: 8px;
-}
-
-/* TODO: animation should have different colors for the bright theme */
-/*  should be something like [data-bs-theme=dark] { } */
-/*  also, maybe you shouldn't animate the background-color, but rather the opacity */
-@keyframes skeleton-loading-dark {
-  0% {
-    background-color: #444;
-  }
-
-  100% {
-    background-color: #5f5f5f;
-  }
-}
-
-@keyframes skeleton-loading-light {
+@keyframes skeleton-loading {
   0% {
-    background-color: #ddd;
+    opacity: 100%;
   }
 
   100% {
-    background-color: #efefef;
+    opacity: 35%;
   }
 }
diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index d9c657e48..3090a0b2d 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -165,30 +165,25 @@ class CommentsLoadingSkeletonItem extends Component<
 > {
   render() {
     return (
-      <div
-        className="my-2"
-        style={{ padding: "0.5rem", "background-color": "#333" }}
-      >
-        <div className="col flex-grow-1">
-          <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 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>

From eacb8c1110cdf9fb86be6c64f4fb62c39f6b4f1a Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Sun, 7 Jan 2024 10:17:57 -0300
Subject: [PATCH 07/13] [loading skeleton] removes unecessary mock code

---
 lemmy-translations                            | 2 +-
 src/shared/components/community/community.tsx | 4 +---
 src/shared/components/home/home.tsx           | 8 ++------
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/lemmy-translations b/lemmy-translations
index 037d39e54..15815aea7 160000
--- a/lemmy-translations
+++ b/lemmy-translations
@@ -1 +1 @@
-Subproject commit 037d39e5450f551d04b74a66c14e0acc7251087f
+Subproject commit 15815aea74fe97360afc03496b3ad62588649af0
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 0e6d1c333..9222ae81c 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -421,7 +421,7 @@ export class Community extends Component<
     if (dataType === DataType.Post) {
       switch (this.state.postsRes.state) {
         case "loading":
-          return <PostsLoadingSkeleton itemCount={10} />;
+          return <PostsLoadingSkeleton />;
         case "success":
           return (
             <PostListings
@@ -595,7 +595,6 @@ export class Community extends Component<
 
     if (dataType === DataType.Post) {
       this.setState({ postsRes: LOADING_REQUEST });
-      await new Promise(resolve => setTimeout(resolve, 6000));
       this.setState({
         postsRes: await HttpService.client.getPosts({
           page_cursor: pageCursor,
@@ -608,7 +607,6 @@ export class Community extends Component<
       });
     } else {
       this.setState({ commentsRes: LOADING_REQUEST });
-      await new Promise(resolve => setTimeout(resolve, 6000));
       this.setState({
         commentsRes: await HttpService.client.getComments({
           limit: fetchLimit,
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index 4cdb37489..b6efe96fa 100644
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@@ -682,11 +682,10 @@ export class Home extends Component<any, HomeState> {
 
     if (dataType === DataType.Post) {
       switch (this.state.postsRes?.state) {
-        // TODO: check if I can merge "empty" and "loading" state on the case 'case' clause
         case "empty":
-          return <PostsLoadingSkeleton itemCount={10} />;
+          return <div style="min-height: 20000px;"></div>;
         case "loading":
-          return <PostsLoadingSkeleton itemCount={10} />;
+          return <PostsLoadingSkeleton />;
         case "success": {
           const posts = this.state.postsRes.data.posts;
           return (
@@ -798,7 +797,6 @@ export class Home extends Component<any, HomeState> {
 
   async fetchTrendingCommunities() {
     this.setState({ trendingCommunitiesRes: LOADING_REQUEST });
-    await new Promise(resolve => setTimeout(resolve, 3000));
     this.setState({
       trendingCommunitiesRes: await HttpService.client.listCommunities({
         type_: "Local",
@@ -813,7 +811,6 @@ export class Home extends Component<any, HomeState> {
 
     if (dataType === DataType.Post) {
       this.setState({ postsRes: LOADING_REQUEST });
-      await new Promise(resolve => setTimeout(resolve, 3000));
       this.setState({
         postsRes: await HttpService.client.getPosts({
           page_cursor: pageCursor,
@@ -825,7 +822,6 @@ export class Home extends Component<any, HomeState> {
       });
     } else {
       this.setState({ commentsRes: LOADING_REQUEST });
-      await new Promise(resolve => setTimeout(resolve, 3000));
       this.setState({
         commentsRes: await HttpService.client.getComments({
           limit: fetchLimit,

From 843e569a2fee3d12cda9aaa1d1b44c433e25c767 Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Wed, 10 Jan 2024 21:54:54 -0300
Subject: [PATCH 08/13] [loading skeleton] removes custom css classes and adds
 more bootstrap css classes on the skeleton loading

---
 src/assets/css/loading-skeleton.css           |  31 ----
 src/shared/components/app/styles.scss         |   1 -
 .../components/common/loading-skeleton.tsx    | 145 +++++++-----------
 3 files changed, 54 insertions(+), 123 deletions(-)
 delete mode 100644 src/assets/css/loading-skeleton.css

diff --git a/src/assets/css/loading-skeleton.css b/src/assets/css/loading-skeleton.css
deleted file mode 100644
index 9b7f8090d..000000000
--- a/src/assets/css/loading-skeleton.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.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%;
-  }
-}
diff --git a/src/shared/components/app/styles.scss b/src/shared/components/app/styles.scss
index d0043d3bb..559f619ff 100644
--- a/src/shared/components/app/styles.scss
+++ b/src/shared/components/app/styles.scss
@@ -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"
diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index 3090a0b2d..236c6a033 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -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 (
       <>
@@ -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>
@@ -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
@@ -130,15 +107,21 @@ 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>
@@ -146,44 +129,24 @@ class TrendingCommunitiesLoadingSkeletonItem extends Component<
   }
 }
 
-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>

From 4dfaba477a507b2ed7f15f1c138a286c0d5858cf Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Mon, 25 Mar 2024 17:31:47 -0300
Subject: [PATCH 09/13] replaces custom styles with bootstrap classes

---
 .../components/common/loading-skeleton.tsx    | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index 236c6a033..7a9c1eca7 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -12,8 +12,8 @@ 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 className="placeholder-glow m-0">
+        <span className={className} style={{ height: "1.3em" }}></span>
       </p>
     );
   }
@@ -31,10 +31,7 @@ class PostThumbnailLoadingSkeleton extends Component<any, any> {
   render() {
     return (
       <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>
+        <span className="placeholder placeholder-lg h-100 w-100 rounded"></span>
       </div>
     );
   }
@@ -105,22 +102,15 @@ class TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> {
         }}
       >
         <div className="row">
-          <div className="col flex-grow-0" style={{ "padding-right": "0px" }}>
+          <div className="col flex-grow-0 pe-0">
             <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>
+              <span className="placeholder placeholder-lg w-100 h-100 rounded-circle"></span>
             </div>
           </div>
-          <div className="col flex-grow-1" style={{ "padding-right": "0px" }}>
+          <div className="col flex-grow-1 pe-0">
             <LoadingSkeletonLine size={12} />
           </div>
         </div>

From 73016da515a3ed7c506237c9802241afb6be3fdd Mon Sep 17 00:00:00 2001
From: Rodrigo <56604262+rodrigo-fm@users.noreply.github.com>
Date: Mon, 25 Mar 2024 17:40:24 -0300
Subject: [PATCH 10/13] rendes only one component for desktop and mobile
 screens

Co-authored-by: SleeplessOne1917 <28871516+SleeplessOne1917@users.noreply.github.com>
---
 .../components/common/loading-skeleton.tsx    | 22 ++-----------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index 7a9c1eca7..d98cbc99c 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -40,27 +40,10 @@ class PostThumbnailLoadingSkeleton extends Component<any, any> {
 class PostsLoadingSkeletonItem extends Component<any, 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">
-                <LoadingSkeletonLine size={12} />
-                <LoadingSkeletonLine size={8} />
-                <LoadingSkeletonLine size={6} />
-              </div>
-              <div className="col flex-grow-0">
-                <PostThumbnailLoadingSkeleton />
-              </div>
-            </div>
-          </div>
-        </div>
-        {/* desktop */}
-        <div className="d-none d-sm-block my-3">
+        <div className="my-3">
           <div className="col flex-grow-1">
             <div className="row">
-              <div className="col flex-grow-0">
+              <div className="col flex-grow-0 order-last order-sm-first">
                 <PostThumbnailLoadingSkeleton />
               </div>
               <div className="col flex-grow-1">
@@ -71,7 +54,6 @@ class PostsLoadingSkeletonItem extends Component<any, any> {
             </div>
           </div>
         </div>
-      </>
     );
   }
 }

From e5a20247f05b858df4ddf5936edd6b382a7c7f37 Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Mon, 25 Mar 2024 18:05:55 -0300
Subject: [PATCH 11/13] fixes lint's indentation problems

---
 .../components/common/loading-skeleton.tsx    | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index d98cbc99c..3b614f6d7 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -40,20 +40,20 @@ class PostThumbnailLoadingSkeleton extends Component<any, any> {
 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 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>
     );
   }
 }

From bc043db46448de376afdda551c83bbc1d49b6776 Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Tue, 26 Mar 2024 20:03:49 -0300
Subject: [PATCH 12/13] transforms span tags into self-closing tags

---
 src/shared/components/common/loading-skeleton.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index 3b614f6d7..15e337009 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -13,7 +13,7 @@ class LoadingSkeletonLine extends Component<LoadingSkeletonLineProps, any> {
     const className = "placeholder placeholder-lg col-" + this.props.size;
     return (
       <p className="placeholder-glow m-0">
-        <span className={className} style={{ height: "1.3em" }}></span>
+        <span className={className} style={{ height: "1.3em" }} />
       </p>
     );
   }
@@ -31,7 +31,7 @@ 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"></span>
+        <span className="placeholder placeholder-lg h-100 w-100 rounded" />
       </div>
     );
   }
@@ -89,7 +89,7 @@ class TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> {
               className="d-flex placeholder-glow"
               style={{ width: "1.5rem", height: "1.5rem" }}
             >
-              <span className="placeholder placeholder-lg w-100 h-100 rounded-circle"></span>
+              <span className="placeholder placeholder-lg w-100 h-100 rounded-circle" />
             </div>
           </div>
           <div className="col flex-grow-1 pe-0">

From 8ec8508dd151a1dadd295dfb55df5c343f29e2ec Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.martins.contato@proton.me>
Date: Tue, 26 Mar 2024 20:34:36 -0300
Subject: [PATCH 13/13] removes every inline style from the
 loading-skeleton.tsx file

---
 src/shared/components/common/loading-skeleton.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/shared/components/common/loading-skeleton.tsx b/src/shared/components/common/loading-skeleton.tsx
index 15e337009..ab146b8a9 100644
--- a/src/shared/components/common/loading-skeleton.tsx
+++ b/src/shared/components/common/loading-skeleton.tsx
@@ -13,7 +13,7 @@ class LoadingSkeletonLine extends Component<LoadingSkeletonLineProps, any> {
     const className = "placeholder placeholder-lg col-" + this.props.size;
     return (
       <p className="placeholder-glow m-0">
-        <span className={className} style={{ height: "1.3em" }} />
+        <span className={`${className} h-100`} />
       </p>
     );
   }
@@ -76,19 +76,10 @@ export class TrendingCommunitiesLoadingSkeleton extends Component<
 class TrendingCommunitiesLoadingSkeletonItem extends Component<any, any> {
   render() {
     return (
-      <div
-        className="col flex-grow-1 mt-2"
-        style={{
-          "padding-left": "calc(var(--bs-gutter-x) *0.5)",
-          "padding-right": "calc(var(--bs-gutter-x) * 1)",
-        }}
-      >
+      <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"
-              style={{ width: "1.5rem", height: "1.5rem" }}
-            >
+            <div className="d-flex placeholder-glow img-icon">
               <span className="placeholder placeholder-lg w-100 h-100 rounded-circle" />
             </div>
           </div>