Merge branch 'main' into fix-profile-loading-spinner

diff --combined src/shared/components/person/profile.tsx
index 33932af54c98f5e0147cd075f7d761fbed2b13ef,ec7538ba8a2cc2e6da05d7aff7a189b266e59dbf..96ac3da388f5e287c8f2881f03400a85057671d9
--- 1/src/shared/components/person/profile.tsx
--- 2/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@@ -5,7 -5,6 +5,6 @@@ import 
    enableDownvotes,
    enableNsfw,
    getCommentParentId,
-   getRoleLabelPill,
    myAuth,
    myAuthRequired,
    setIsoData,
@@@ -85,6 -84,7 +84,7 @@@ import { HtmlTags } from "../common/htm
  import { Icon, Spinner } from "../common/icon";
  import { MomentTime } from "../common/moment-time";
  import { SortSelect } from "../common/sort-select";
+ import { UserBadges } from "../common/user-badges";
  import { CommunityLink } from "../community/community-link";
  import { PersonDetails } from "./person-details";
  import { PersonListing } from "./person-listing";
@@@ -232,7 -232,7 +232,7 @@@ export class Profile extends Component
    async fetchUserData() {
      const { page, sort, view } = getProfileQueryParams();
  
 -    this.setState({ personRes: { state: "empty" } });
 +    this.setState({ personRes: { state: "loading" } });
      this.setState({
        personRes: await HttpService.client.getPersonDetails({
          username: this.props.match.params.username,
@@@ -484,46 -484,15 +484,15 @@@
                          hideAvatar
                        />
                      </li>
-                     {isBanned(pv.person) && (
-                       <li className="list-inline-item">
-                         {getRoleLabelPill({
-                           label: I18NextService.i18n.t("banned"),
-                           tooltip: I18NextService.i18n.t("banned"),
-                           classes: "text-bg-danger",
-                           shrink: false,
-                         })}
-                       </li>
-                     )}
-                     {pv.person.deleted && (
-                       <li className="list-inline-item">
-                         {getRoleLabelPill({
-                           label: I18NextService.i18n.t("deleted"),
-                           tooltip: I18NextService.i18n.t("deleted"),
-                           classes: "text-bg-danger",
-                           shrink: false,
-                         })}
-                       </li>
-                     )}
-                     {pv.person.admin && (
-                       <li className="list-inline-item">
-                         {getRoleLabelPill({
-                           label: I18NextService.i18n.t("admin"),
-                           tooltip: I18NextService.i18n.t("admin"),
-                           shrink: false,
-                         })}
-                       </li>
-                     )}
-                     {pv.person.bot_account && (
-                       <li className="list-inline-item">
-                         {getRoleLabelPill({
-                           label: I18NextService.i18n
-                             .t("bot_account")
-                             .toLowerCase(),
-                           tooltip: I18NextService.i18n.t("bot_account"),
-                           shrink: false,
-                         })}
-                       </li>
-                     )}
+                     <li className="list-inline-item">
+                       <UserBadges
+                         classNames="ms-1"
+                         isBanned={isBanned(pv.person)}
+                         isDeleted={pv.person.deleted}
+                         isAdmin={pv.person.admin}
+                         isBot={pv.person.bot_account}
+                       />
+                     </li>
                    </ul>
                  </div>
                  {this.banDialog(pv)}