Fix sidebar spinner alignment

src/features/auth/login/pickJoinServer/PickJoinServer.tsx

@@ -60,7 +60,7 @@ const spacing = `
   width: 100%;
 `;
 
-const CenteredSpinner = styled(IonSpinner)`
+const SpacedSpinner = styled(IonSpinner)`
   ${spacing}
 `;
 
@@ -311,7 +311,7 @@ export default function PickJoinServer() {
       );
     }
 
-    if (loading || loadingInstances) return <CenteredSpinner />;
+    if (loading || loadingInstances) return <SpacedSpinner />;
 
     return <Empty>No results</Empty>;
   })();

src/features/community/list/GuestCommunitiesList.tsx

@@ -1,10 +1,10 @@
 import { Community } from "lemmy-js-client";
 import { useEffect, useState } from "react";
 import ResolvedCommunitiesList from "./ResolvedCommunitiesList";
-import { CenteredSpinner } from "../../../routes/pages/posts/PostPage";
 import { useAppSelector } from "../../../store";
 import { clientSelector } from "../../auth/authSelectors";
 import { CommunitiesListProps } from "./CommunitiesList";
+import { CenteredSpinner } from "../../shared/CenteredSpinner";
 
 /**
  * User probably just wants to see local-only communities for certain

src/features/feed/Feed.tsx

@@ -14,7 +14,6 @@ import {
   RefresherCustomEvent,
 } from "@ionic/react";
 import { LIMIT as DEFAULT_LIMIT } from "../../services/lemmy";
-import { CenteredSpinner } from "../../routes/pages/posts/PostPage";
 import { pullAllBy } from "lodash";
 import { useSetActivePage } from "../auth/AppContext";
 import EndPost, { EndPostProps } from "./endItems/EndPost";
@@ -24,6 +23,7 @@ import { VList, VListHandle } from "virtua";
 import { FeedSearchContext } from "../../routes/pages/shared/CommunityPage";
 import { useAppSelector } from "../../store";
 import FetchMore from "./endItems/FetchMore";
+import { CenteredSpinner } from "../shared/CenteredSpinner";
 
 type PageData =
   | {

src/features/search/AutoResolvePostComment.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { resolveObject } from "../resolve/resolveSlice";
-import { CenteredSpinner } from "../../routes/pages/posts/PostPage";
 import Post from "../post/inFeed/Post";
 import FeedComment from "../comment/inFeed/FeedComment";
 import { styled } from "@linaria/react";
 import { InFeedContext } from "../feed/Feed";
 import { useDebounceValue } from "usehooks-ts";
+import { CenteredSpinner } from "../shared/CenteredSpinner";
 
 const StyledCenteredSpinner = styled(CenteredSpinner)`
   margin-top: 60px;

src/features/shared/CenteredSpinner.tsx

@@ -0,0 +1,9 @@
+import { IonSpinner } from "@ionic/react";
+import { styled } from "@linaria/react";
+
+export const CenteredSpinner = styled(IonSpinner)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;

src/features/sidebar/internal/InstanceSidebar.tsx

@@ -2,22 +2,14 @@ import { useAppSelector } from "../../../store";
 import GenericSidebar from "./GenericSidebar";
 import { IonBadge } from "@ionic/react";
 import { lemmyVersionSelector } from "../../auth/siteSlice";
-import { CenteredSpinner } from "../../../routes/pages/posts/PostPage";
-import { css } from "@linaria/core";
+import { CenteredSpinner } from "../../shared/CenteredSpinner";
 
 export default function InstanceSidebar() {
   const siteView = useAppSelector((state) => state.site.response?.site_view);
   const admins = useAppSelector((state) => state.site.response?.admins);
   const lemmyVersion = useAppSelector(lemmyVersionSelector);
 
-  if (!siteView || !admins)
-    return (
-      <CenteredSpinner
-        className={css`
-          margin-top: 25vh;
-        `}
-      />
-    );
+  if (!siteView || !admins) return <CenteredSpinner />;
 
   const { site, counts } = siteView;
 

src/routes/pages/inbox/MessagesPage.tsx

@@ -20,9 +20,9 @@ import {
   syncMessages,
 } from "../../../features/inbox/inboxSlice";
 import ComposeButton from "./ComposeButton";
-import { CenteredSpinner } from "../posts/PostPage";
 import { useSetActivePage } from "../../../features/auth/AppContext";
 import AppHeader from "../../../features/shared/AppHeader";
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 export default function MessagesPage() {
   const pageRef = useRef<HTMLElement>(null);
@@ -55,6 +55,20 @@ export default function MessagesPage() {
     }
   }
 
+  const content = (() => {
+    if (!messages.length && loading) return <CenteredSpinner />;
+
+    return (
+      <MaxWidthContainer>
+        <IonList>
+          {groupedConversations.map((conversationMessages, index) => (
+            <ConversationItem key={index} messages={conversationMessages} />
+          ))}
+        </IonList>
+      </MaxWidthContainer>
+    );
+  })();
+
   return (
     <IonPage ref={pageRef}>
       <AppHeader>
@@ -84,17 +98,8 @@ export default function MessagesPage() {
         >
           <IonRefresherContent />
         </IonRefresher>
-        {!messages.length && loading ? (
-          <CenteredSpinner />
-        ) : (
-          <MaxWidthContainer>
-            <IonList>
-              {groupedConversations.map((conversationMessages, index) => (
-                <ConversationItem key={index} messages={conversationMessages} />
-              ))}
-            </IonList>
-          </MaxWidthContainer>
-        )}
+
+        {content}
       </IonContent>
     </IonPage>
   );

src/routes/pages/posts/PostPage.tsx

@@ -6,7 +6,6 @@ import {
   IonPage,
   IonRefresher,
   IonRefresherContent,
-  IonSpinner,
   IonTitle,
   IonToolbar,
   RefresherCustomEvent,
@@ -29,13 +28,7 @@ import { useRef } from "react";
 import AppHeader from "../../../features/shared/AppHeader";
 import useFeedSort from "../../../features/feed/sort/useFeedSort";
 import { getRemoteHandleFromHandle } from "../../../helpers/lemmy";
-
-export const CenteredSpinner = styled(IonSpinner)`
-  position: relative;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-`;
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 export const AnnouncementIcon = styled(IonIcon)`
   font-size: 1.1rem;

src/routes/pages/search/RandomCommunityPage.tsx

@@ -11,8 +11,8 @@ import {
   IonToolbar,
 } from "@ionic/react";
 import useGetRandomCommunity from "../../../features/community/useGetRandomCommunity";
-import { CenteredSpinner } from "../posts/PostPage";
 import { FailedMessage } from "../../../features/user/AsyncProfile";
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 export default function RandomCommunityPage() {
   const pushed = useRef(false);

src/routes/pages/settings/BlocksSettingsPage.tsx

@@ -16,7 +16,6 @@ import { useAppSelector } from "../../../store";
 import { userHandleSelector } from "../../../features/auth/authSelectors";
 import FilterNsfw from "../../../features/settings/blocks/FilterNsfw";
 import BlockedCommunities from "../../../features/settings/blocks/BlockedCommunities";
-import { CenteredSpinner } from "../posts/PostPage";
 import BlockedUsers from "../../../features/settings/blocks/BlockedUsers";
 import FilteredKeywords from "../../../features/settings/blocks/FilteredKeywords";
 import BlockedInstances from "../../../features/settings/blocks/BlockedInstances";
@@ -28,6 +27,7 @@ import {
   ListEditButton,
   ListEditorProvider,
 } from "../../../features/shared/ListEditor";
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 export default function BlocksSettingsPage() {
   const pageRef = useRef<HTMLElement>(null);
@@ -45,6 +45,25 @@ export default function BlocksSettingsPage() {
 
   useSetActivePage(pageRef);
 
+  const content = (() => {
+    if (!localUser)
+      return (
+        <IonContent scrollY={false}>
+          <CenteredSpinner />
+        </IonContent>
+      );
+
+    return (
+      <AppContent scrollY>
+        <FilterNsfw />
+        <FilteredKeywords />
+        <BlockedCommunities />
+        <BlockedUsers />
+        <BlockedInstances />
+      </AppContent>
+    );
+  })();
+
   const page = (
     <IonPage ref={pageRef} className="grey-bg">
       <AppHeader>
@@ -66,19 +85,8 @@ export default function BlocksSettingsPage() {
           </IonButtons>
         </IonToolbar>
       </AppHeader>
-      {localUser ? (
-        <AppContent scrollY>
-          <FilterNsfw />
-          <FilteredKeywords />
-          <BlockedCommunities />
-          <BlockedUsers />
-          <BlockedInstances />
-        </AppContent>
-      ) : (
-        <IonContent scrollY={false}>
-          <CenteredSpinner />
-        </IonContent>
-      )}
+
+      {content}
     </IonPage>
   );
 

src/routes/pages/shared/CommunityPage.tsx

@@ -35,7 +35,6 @@ import { getSortDuration } from "../../../features/feed/endItems/EndPost";
 import ModActions from "../../../features/community/mod/ModActions";
 import { useOptimizedIonRouter } from "../../../helpers/useOptimizedIonRouter";
 import useFeedSort from "../../../features/feed/sort/useFeedSort";
-import { CenteredSpinner } from "../posts/PostPage";
 import { getRemoteHandleFromHandle } from "../../../helpers/lemmy";
 import { useAppSelector } from "../../../store";
 import { PageTypeContext } from "../../../features/feed/PageTypeContext";
@@ -46,6 +45,7 @@ import useGetRandomCommunity from "../../../features/community/useGetRandomCommu
 import PostAppearanceProvider, {
   WaitUntilPostAppearanceResolved,
 } from "../../../features/post/appearance/PostAppearanceProvider";
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 const StyledFeedContent = styled(FeedContent)`
   .ios & {
@@ -221,24 +221,26 @@ const CommunityPageContent = memo(function CommunityPageContent({
       />
     );
 
-  const feed = sort ? (
-    <FeedSearchContext.Provider value={feedSearchContextValue}>
-      <PageTypeContext.Provider value="community">
-        <WaitUntilPostAppearanceResolved>
-          <PostCommentFeed
-            fetchFn={fetchFn}
-            communityName={community}
-            sortDuration={getSortDuration(sort)}
-            header={header}
-            filterHiddenPosts={!showHiddenInCommunities}
-            onPull={onPull}
-          />
-        </WaitUntilPostAppearanceResolved>
-      </PageTypeContext.Provider>
-    </FeedSearchContext.Provider>
-  ) : (
-    <CenteredSpinner />
-  );
+  const feed = (() => {
+    if (!sort) return <CenteredSpinner />;
+
+    return (
+      <FeedSearchContext.Provider value={feedSearchContextValue}>
+        <PageTypeContext.Provider value="community">
+          <WaitUntilPostAppearanceResolved>
+            <PostCommentFeed
+              fetchFn={fetchFn}
+              communityName={community}
+              sortDuration={getSortDuration(sort)}
+              header={header}
+              filterHiddenPosts={!showHiddenInCommunities}
+              onPull={onPull}
+            />
+          </WaitUntilPostAppearanceResolved>
+        </PageTypeContext.Provider>
+      </FeedSearchContext.Provider>
+    );
+  })();
 
   function renderFeed() {
     if (searchQuery)

src/routes/pages/shared/CommunitySidebarPage.tsx

@@ -10,11 +10,11 @@ import { useAppDispatch, useAppSelector } from "../../../store";
 import { memo, useEffect, useRef } from "react";
 import { getCommunity } from "../../../features/community/communitySlice";
 import { useBuildGeneralBrowseLink } from "../../../helpers/routes";
-import { CenteredSpinner } from "../posts/PostPage";
 import AppContent from "../../../features/shared/AppContent";
 import Sidebar from "../../../features/sidebar/Sidebar";
 import { useSetActivePage } from "../../../features/auth/AppContext";
 import AppHeader from "../../../features/shared/AppHeader";
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 interface CommunitySidebarPageProps {
   community: string;

src/routes/pages/shared/ModlogPage.tsx

@@ -15,14 +15,14 @@ import { values } from "lodash";
 import { ModlogItem } from "../../../features/moderation/logs/ModlogItem";
 import { LIMIT } from "../../../services/lemmy";
 import useFetchCommunity from "../../../features/community/useFetchCommunity";
-import { CenteredSpinner } from "../posts/PostPage";
 import { useParams } from "react-router";
 import { getHandle } from "../../../helpers/lemmy";
 import { useBuildGeneralBrowseLink } from "../../../helpers/routes";
 import { buildCommunityLink } from "../../../helpers/appLinkBuilder";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { getUser } from "../../../features/user/userSlice";
 import AppHeader from "../../../features/shared/AppHeader";
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 export type ModlogItemType =
   GetModlogResponse[keyof GetModlogResponse] extends (infer T)[] ? T : never;

src/routes/pages/shared/ModqueuePage.tsx

@@ -18,7 +18,6 @@ import {
   PostView,
 } from "lemmy-js-client";
 import useFetchCommunity from "../../../features/community/useFetchCommunity";
-import { CenteredSpinner } from "../posts/PostPage";
 import { useParams } from "react-router";
 import { getHandle } from "../../../helpers/lemmy";
 import { useBuildGeneralBrowseLink } from "../../../helpers/routes";
@@ -36,6 +35,7 @@ import {
 } from "../../../features/moderation/modSlice";
 import { LIMIT } from "../../../services/lemmy";
 import AppHeader from "../../../features/shared/AppHeader";
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 export default function ModqueuePage() {
   const { community } = useParams<{ community?: string }>();

src/routes/pages/shared/SpecialFeedPage.tsx

@@ -20,14 +20,14 @@ import PostFabs from "../../../features/feed/postFabs/PostFabs";
 import { getSortDuration } from "../../../features/feed/endItems/EndPost";
 import { followIdsSelector } from "../../../features/auth/siteSlice";
 import { getHandle } from "../../../helpers/lemmy";
-import { CenteredSpinner } from "../posts/PostPage";
 import ModActions from "../../../features/community/mod/ModActions";
 import useFeedSort from "../../../features/feed/sort/useFeedSort";
 import { PageTypeContext } from "../../../features/feed/PageTypeContext";
 import AppHeader from "../../../features/shared/AppHeader";
 import PostAppearanceProvider, {
   WaitUntilPostAppearanceResolved,
 } from "../../../features/post/appearance/PostAppearanceProvider";
+import { CenteredSpinner } from "../../../features/shared/CenteredSpinner";
 
 interface SpecialFeedProps {
   type: ListingType;