diff --git a/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx b/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx
index dc34e73e0..71d1c9f29 100644
--- a/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx
+++ b/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx
@@ -8,7 +8,7 @@ import { render, screen, waitFor } from '../../../jest/test-helpers';
import FeedCarousel from '../feed-carousel';
jest.mock('../../../hooks/useDimensions', () => ({
- useDimensions: () => [{ scrollWidth: 190 }, null, { width: 100 }],
+ useDimensions: () => [{ scrollWidth: 190 }, null, { width: 300 }],
}));
(window as any).ResizeObserver = class ResizeObserver {
@@ -21,27 +21,6 @@ jest.mock('../../../hooks/useDimensions', () => ({
describe('', () => {
let store: any;
- describe('with "carousel" disabled', () => {
- beforeEach(() => {
- store = {
- instance: {
- version: '2.7.2 (compatible; Pleroma 2.4.52-1337-g4779199e.gleasonator+soapbox)',
- pleroma: ImmutableMap({
- metadata: ImmutableMap({
- features: [],
- }),
- }),
- },
- };
- });
-
- it('should render nothing', () => {
- render(, undefined, store);
-
- expect(screen.queryAllByTestId('feed-carousel')).toHaveLength(0);
- });
- });
-
describe('with "carousel" enabled', () => {
beforeEach(() => {
store = {
@@ -167,15 +146,15 @@ describe('', () => {
render(, undefined, store);
await waitFor(() => {
- expect(screen.getByTestId('next-page')).toBeInTheDocument();
- expect(screen.queryAllByTestId('prev-page')).toHaveLength(0);
+ expect(screen.getByTestId('prev-page')).toHaveAttribute('disabled');
+ expect(screen.getByTestId('next-page')).not.toHaveAttribute('disabled');
});
await user.click(screen.getByTestId('next-page'));
await waitFor(() => {
- expect(screen.getByTestId('prev-page')).toBeInTheDocument();
- expect(screen.queryAllByTestId('next-page')).toHaveLength(0);
+ expect(screen.getByTestId('prev-page')).not.toHaveAttribute('disabled');
+ expect(screen.getByTestId('next-page')).toHaveAttribute('disabled');
});
});
});
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 23f417959..27b23a503 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -83,7 +83,7 @@ const CarouselItem = React.forwardRef((
});
const FeedCarousel = () => {
- const { data: avatars, isFetching, isError } = useCarouselAvatars();
+ const { data: avatars, isFetching, isFetched, isError } = useCarouselAvatars();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_ref, setContainerRef, { width }] = useDimensions();
@@ -141,6 +141,10 @@ const FeedCarousel = () => {
);
}
+ if (isFetched && avatars.length === 0) {
+ return null;
+ }
+
return (