diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx
index 72012ffc..81e30577 100644
--- a/src/views/board/board.tsx
+++ b/src/views/board/board.tsx
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
-import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useBlock, useFeed } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { Trans, useTranslation } from 'react-i18next';
@@ -157,9 +157,9 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
// Use stable subplebbit fields to avoid rerenders from updatingState
const subplebbitTitle = useSubplebbitField(subplebbitAddress, (sub) => sub?.title);
const shortAddress = useSubplebbitField(subplebbitAddress, (sub) => sub?.shortAddress);
- // Subscribe to transient state/error separately from stable fields since useStableSubplebbit ignores them
- const subplebbitState = useSubplebbitField(subplebbitAddress, (sub) => sub?.state);
- const subplebbitError = useSubplebbitField(subplebbitAddress, (sub) => sub?.error);
+ // useSubplebbitField only reads from store, doesn't trigger fetching
+ const subplebbit = useSubplebbit({ subplebbitAddress });
+ const { error: subplebbitError, state: subplebbitState } = subplebbit || {};
const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : isInModView ? t('mod') : subplebbitTitle;
const { blocked, unblock } = useBlock({ address: subplebbitAddress });
diff --git a/src/views/mod-queue/mod-queue.module.css b/src/views/mod-queue/mod-queue.module.css
index 96880684..cf0b6066 100644
--- a/src/views/mod-queue/mod-queue.module.css
+++ b/src/views/mod-queue/mod-queue.module.css
@@ -105,6 +105,11 @@
justify-content: center;
}
+.error {
+ padding: 10px;
+ text-align: center;
+}
+
/* ModQueueRow styles */
.row {
display: flex;
diff --git a/src/views/mod-queue/mod-queue.tsx b/src/views/mod-queue/mod-queue.tsx
index 5f7105f0..83634157 100644
--- a/src/views/mod-queue/mod-queue.tsx
+++ b/src/views/mod-queue/mod-queue.tsx
@@ -1,7 +1,7 @@
import React, { useMemo, useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams, Link } from 'react-router-dom';
-import { useFeed, Comment, usePublishCommentModeration, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import { useFeed, Comment, usePublishCommentModeration, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import useAccountsStore from '@plebbit/plebbit-react-hooks/dist/stores/accounts';
import { Virtuoso } from 'react-virtuoso';
import { formatDistanceToNow } from 'date-fns';
@@ -9,6 +9,7 @@ import styles from './mod-queue.module.css';
import useModQueueStore from '../../stores/use-mod-queue-store';
import { useAccountSubplebbitsWithMetadata } from '../../hooks/use-account-subplebbits-with-metadata';
import LoadingEllipsis from '../../components/loading-ellipsis';
+import ErrorDisplay from '../../components/error-display/error-display';
import { useFeedStateString } from '../../hooks/use-state-string';
import { getSubplebbitAddress, getBoardPath } from '../../lib/utils/route-utils';
import { useDefaultSubplebbits, MultisubSubplebbit } from '../../hooks/use-default-subplebbits';
@@ -489,6 +490,10 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
return [];
}, [resolvedAddress, selectedBoardFilter, accountSubplebbitAddresses]);
+ const subplebbitAddress = subplebbitAddresses[0];
+ const subplebbit = useSubplebbit({ subplebbitAddress });
+ const { error: subplebbitError } = subplebbit || {};
+
const { feed, hasMore, loadMore, reset } = useFeed({
subplebbitAddresses,
modQueue: ['pendingApproval'],
@@ -513,9 +518,18 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
// Note: useFeedStateString is called inside ModQueueFooter to isolate re-renders from backend state changes
const footerComponents = useMemo(
() => ({
- Footer: () =>