Rename "EmptyView"

src/components/MangaGrid.tsx

@@ -11,7 +11,7 @@ import Grid, { GridTypeMap } from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import { GridItemProps, GridStateSnapshot, VirtuosoGrid } from 'react-virtuoso';
 import { useLocation } from 'react-router-dom';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { MangaCard } from '@/components/MangaCard';
 import { GridLayout } from '@/components/context/LibraryOptionsContext';
@@ -213,7 +213,7 @@ const VerticalGrid = forwardRef(
 
 export interface IMangaGridProps
     extends Omit<DefaultGridProps, 'GridItemContainer'>,
-        Partial<React.ComponentProps<typeof EmptyView>> {
+        Partial<React.ComponentProps<typeof EmptyViewAbsoluteCentered>> {
     hasNextPage: boolean;
     loadMore: () => void;
     horizontal?: boolean | undefined;
@@ -314,7 +314,9 @@ export const MangaGrid: React.FC<IMangaGridProps> = (props) => {
 
     const hasNoItems = !isLoading && mangas.length === 0;
     if (hasNoItems) {
-        return <EmptyView noFaces={noFaces} message={message!} messageExtra={messageExtra} retry={retry} />;
+        return (
+            <EmptyViewAbsoluteCentered noFaces={noFaces} message={message!} messageExtra={messageExtra} retry={retry} />
+        );
     }
 
     return (

src/components/chapter/ChapterList.tsx

@@ -24,7 +24,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ChapterCard } from '@/components/chapter/ChapterCard.tsx';
 import { ResumeFab } from '@/components/manga/ResumeFAB.tsx';
 import { filterAndSortChapters, useChapterOptions } from '@/components/chapter/util.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { ChaptersToolbarMenu } from '@/components/chapter/ChaptersToolbarMenu.tsx';
 import { SelectionFAB } from '@/components/collection/SelectionFAB.tsx';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab.tsx';
@@ -149,7 +149,7 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
     if (error) {
         return (
             <Stack sx={{ justifyContent: 'center', position: 'relative', flexGrow: 1 }}>
-                <EmptyView
+                <EmptyViewAbsoluteCentered
                     message={t('global.error.label.failed_to_load_data')}
                     messageExtra={error.message}
                     retry={() => refetch().catch(defaultPromiseErrorHandler('ChapterList::refetch'))}
@@ -214,8 +214,10 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
                     </Stack>
                 </ChapterListHeader>
 
-                {noChaptersFound && <EmptyView message={t('chapter.error.label.no_chapter_found')} />}
-                {noChaptersMatchingFilter && <EmptyView message={t('chapter.error.label.no_matches')} />}
+                {noChaptersFound && <EmptyViewAbsoluteCentered message={t('chapter.error.label.no_chapter_found')} />}
+                {noChaptersMatchingFilter && (
+                    <EmptyViewAbsoluteCentered message={t('chapter.error.label.no_matches')} />
+                )}
 
                 <StyledVirtuoso
                     style={{

src/components/settings/DeviceSetting.tsx

@@ -20,7 +20,7 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts';
 import { Select } from '@/components/atoms/Select.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 export const DeviceSetting = () => {
@@ -72,7 +72,7 @@ export const DeviceSetting = () => {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('DeviceSetting::refetch'))}

src/components/tracker/TrackManga.tsx

@@ -12,7 +12,7 @@ import { useEffect, useMemo, useState } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 import { Trackers } from '@/lib/data/Trackers.ts';
 import { TrackerCard, TrackerMode } from '@/components/tracker/TrackerCard.tsx';
@@ -81,7 +81,7 @@ export const TrackManga = ({ manga }: { manga: Pick<TManga, 'id' | 'trackRecords
 
     if (trackerList.error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={trackerList.error.message}
                 retry={() => trackerList.refetch().catch(defaultPromiseErrorHandler('TrackManga::refetch'))}

src/components/tracker/TrackerSearch.tsx

@@ -17,7 +17,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 import { TBaseTracker } from '@/lib/data/Trackers.ts';
 import { SearchTextField } from '@/components/atoms/SearchTextField.tsx';
@@ -108,11 +108,11 @@ export const TrackerSearch = ({
             </DialogTitle>
             <DialogContent dividers sx={{ padding: DIALOG_PADDING, height: '100vh' }}>
                 {!trackerSearch.loading && !trackerSearch.error && !hasResults && (
-                    <EmptyView message={t('manga.error.label.no_mangas_found')} />
+                    <EmptyViewAbsoluteCentered message={t('manga.error.label.no_mangas_found')} />
                 )}
                 {trackerSearch.loading && <LoadingPlaceholder />}
                 {trackerSearch.error && !trackerSearch.loading && (
-                    <EmptyView
+                    <EmptyViewAbsoluteCentered
                         message={t('global.error.label.failed_to_load_data')}
                         messageExtra={trackerSearch.error.message}
                         retry={() =>

src/components/util/EmptyViewAbsoluteCentered.tsx

@@ -30,7 +30,7 @@ interface IProps {
     noFaces?: boolean;
 }
 
-export function EmptyView({ message, messageExtra, retry, noFaces }: IProps) {
+export function EmptyViewAbsoluteCentered({ message, messageExtra, retry, noFaces }: IProps) {
     const { t } = useTranslation();
     const theme = useTheme();
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
@@ -60,6 +60,6 @@ export function EmptyView({ message, messageExtra, retry, noFaces }: IProps) {
     );
 }
 
-EmptyView.defaultProps = {
+EmptyViewAbsoluteCentered.defaultProps = {
     messageExtra: undefined,
 };