From 35f7098a147053076322ba347991c6838ac4e0ef Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Mon, 6 Jun 2022 14:52:24 +0200
Subject: [PATCH] better loadingIcon style

---
 packages/app/src/components/PostsFeed/index.jsx |  3 ++-
 packages/app/src/theme/index.less               | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/PostsFeed/index.jsx b/packages/app/src/components/PostsFeed/index.jsx
index 17e7389a..343a323b 100644
--- a/packages/app/src/components/PostsFeed/index.jsx
+++ b/packages/app/src/components/PostsFeed/index.jsx
@@ -1,6 +1,7 @@
 import React from "react"
 import * as antd from "antd"
 import { User } from "models"
+import { Icons } from "components/Icons"
 import { PostCard, LoadMore } from "components"
 
 import "./index.less"
@@ -9,7 +10,7 @@ const LoadingComponent = () => {
     // FIXME: Im not sure why but, using <antd.Skeleton> will cause a memory leak of DOM Nodes when using IntersectionObserver
     //return <antd.Skeleton active />
 
-    return <p>Loading more ...</p>
+    return <p><Icons.LoadingOutlined spin className="loadingIcon" /> Loading more ...</p>
 }
 
 const NoResultComponent = () => {
diff --git a/packages/app/src/theme/index.less b/packages/app/src/theme/index.less
index 6a77cd73..19b8259b 100644
--- a/packages/app/src/theme/index.less
+++ b/packages/app/src/theme/index.less
@@ -267,6 +267,18 @@ body {
 	align-items: center;
 }
 
+.loadingIcon {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	font-size: 1rem;
+
+	svg {
+		margin: 0;
+	}
+}
+
 // Fixments
 .ant-btn {
 	display: flex;