Rename "EmptyView"

2024-04-29 15:29:33 +02:00
parent 7866fdb9f1
commit 054585f488
26 changed files with 65 additions and 59 deletions
--- a/src/components/MangaGrid.tsx
+++ b/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 (
--- a/src/components/chapter/ChapterList.tsx
+++ b/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={{
--- a/src/components/settings/DeviceSetting.tsx
+++ b/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'))}
--- a/src/components/tracker/TrackManga.tsx
+++ b/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'))}
--- a/src/components/tracker/TrackerSearch.tsx
+++ b/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={() =>
--- a/src/components/util/EmptyViewAbsoluteCentered.tsx
+++ b/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,
 };
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -27,7 +27,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { StrictModeDroppable } from '@/lib/StrictModeDroppable';
 import { makeToast } from '@/components/util/Toast';
 import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
 import { TChapter } from '@/typings.ts';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
@@ -225,7 +225,7 @@ export const DownloadQueue: React.FC = () => {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadQueue::refetch'))}
@@ -234,7 +234,7 @@ export const DownloadQueue: React.FC = () => {
    }

    if (isQueueEmpty) {
-        return <EmptyView message={t('download.queue.label.no_downloads')} />;
+        return <EmptyViewAbsoluteCentered message={t('download.queue.label.no_downloads')} />;
    }

    return (
--- a/src/screens/Extensions.tsx
+++ b/src/screens/Extensions.tsx
@@ -39,7 +39,7 @@ import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { StyledGroupedVirtuoso } from '@/components/virtuoso/StyledGroupedVirtuoso.tsx';
 import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx';
 import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';

 const LANGUAGE = 0;
@@ -237,7 +237,7 @@ export function Extensions() {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => fetchExtensions().catch(defaultPromiseErrorHandler('Extensions::refetch'))}
--- a/src/screens/Library.tsx
+++ b/src/screens/Library.tsx
@@ -13,7 +13,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import { useQueryParam, NumberParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { TabPanel } from '@/components/tabs/TabPanel.tsx';
 import { LibraryToolbarMenu } from '@/components/library/LibraryToolbarMenu';
@@ -195,7 +195,7 @@ export function Library() {

    if (tabsError != null) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('category.error.label.request_failure')}
                messageExtra={tabsError.message}
                retry={() => refetchCategories().catch(defaultPromiseErrorHandler('Library::refetchCategories'))}
@@ -208,7 +208,7 @@ export function Library() {
    }

    if (tabs.length === 0) {
-        return <EmptyView message={t('library.error.label.empty')} />;
+        return <EmptyViewAbsoluteCentered message={t('library.error.label.empty')} />;
    }

    if (tabs.length === 1) {
--- a/src/screens/Manga.tsx
+++ b/src/screens/Manga.tsx
@@ -22,7 +22,7 @@ import { ChapterList } from '@/components/chapter/ChapterList.tsx';
 import { useRefreshManga } from '@/components/manga/useRefreshManga.ts';
 import { MangaDetails } from '@/components/manga/MangaDetails';
 import { MangaToolbarMenu } from '@/components/manga/MangaToolbarMenu';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';

 export const Manga: React.FC = () => {
@@ -92,7 +92,9 @@ export const Manga: React.FC = () => {
    }, [t, error, isValidating, refreshing, manga, refresh]);

    if (error && !manga) {
-        return <EmptyView message={t('manga.error.label.request_failure')} messageExtra={error.message} />;
+        return (
+            <EmptyViewAbsoluteCentered message={t('manga.error.label.request_failure')} messageExtra={error.message} />
+        );
    }
    return (
        <Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
--- a/src/screens/Migrate.tsx
+++ b/src/screens/Migrate.tsx
@@ -14,7 +14,7 @@ import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { TMigratableSource } from '@/components/MigrationCard.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { MangaGrid } from '@/components/MangaGrid.tsx';
 import { TPartialManga } from '@/typings.ts';
 import { GridLayouts } from '@/components/source/GridLayouts.tsx';
@@ -99,7 +99,7 @@ export const Migrate = () => {
    if (hasError) {
        const error = (hasErrorSource ? sourceError : mangasError)!;
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => {
--- a/src/screens/Migration.tsx
+++ b/src/screens/Migration.tsx
@@ -11,7 +11,7 @@ import { useMemo } from 'react';
 import List from '@mui/material/List';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
 import { MigrationCard, TMigratableSource } from '@/components/MigrationCard.tsx';
 import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
@@ -55,7 +55,7 @@ export const Migration = () => {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('Migration::refetch'))}
--- a/src/screens/Reader.tsx
+++ b/src/screens/Reader.tsx
@@ -32,7 +32,7 @@ import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
 import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { Chapters } from '@/lib/data/Chapters.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';

 const getReaderComponent = (readerType: ReaderType) => {
    switch (readerType) {
@@ -434,7 +434,7 @@ export function Reader() {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => {
--- a/src/screens/SourceConfigure.tsx
+++ b/src/screens/SourceConfigure.tsx
@@ -19,7 +19,7 @@ import { MultiSelectListPreference } from '@/components/sourceConfiguration/Mult
 import { PreferenceProps } from '@/typings.ts';
 import { NavBarContext } from '@/components/context/NavbarContext.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';

 function getPrefComponent(type: string) {
@@ -71,7 +71,7 @@ export function SourceConfigure() {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('SourceConfigure::refetch'))}
--- a/src/screens/Sources.tsx
+++ b/src/screens/Sources.tsx
@@ -22,7 +22,7 @@ import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { SourceCard } from '@/components/SourceCard';
 import { LangSelect } from '@/components/navbar/action/LangSelect';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';

 function sourceToLangList(sources: ISource[]) {
@@ -118,7 +118,7 @@ export function Sources() {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('Sources::refetch'))}
@@ -127,7 +127,7 @@ export function Sources() {
    }

    if (sources?.length === 0) {
-        return <EmptyView message={t('source.error.label.no_sources_found')} />;
+        return <EmptyViewAbsoluteCentered message={t('source.error.label.no_sources_found')} />;
    }

    return (
--- a/src/screens/Updates.tsx
+++ b/src/screens/Updates.tsx
@@ -21,7 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
 import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
 import { TChapter } from '@/typings.ts';
@@ -137,7 +137,7 @@ export const Updates: React.FC = () => {
    }, [hasNextPage, endCursor]);

    if (!isLoading && updateEntries.length === 0) {
-        return <EmptyView message={t('updates.error.label.no_updates_available')} />;
+        return <EmptyViewAbsoluteCentered message={t('updates.error.label.no_updates_available')} />;
    }

    return (
--- a/src/screens/settings/About.tsx
+++ b/src/screens/settings/About.tsx
@@ -28,7 +28,7 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { GetAboutQuery, UpdateState } from '@/lib/graphql/generated/graphql.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';

 type AboutServer = GetAboutQuery['aboutServer'];

@@ -242,7 +242,7 @@ export function About() {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('About::refetch'))}
--- a/src/screens/settings/Backup.tsx
+++ b/src/screens/settings/Backup.tsx
@@ -32,7 +32,7 @@ import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { TimeSetting } from '@/components/settings/TimeSetting.tsx';
 import { ServerSettings } from '@/typings.ts';
 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';

 type BackupSettingsType = Pick<ServerSettings, 'backupPath' | 'backupTime' | 'backupInterval' | 'backupTTL'>;
@@ -231,7 +231,7 @@ export function Backup() {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('Backup::refetch'))}
--- a/src/screens/settings/BrowseSettings.tsx
+++ b/src/screens/settings/BrowseSettings.tsx
@@ -24,7 +24,7 @@ import {
    useMetadataServerSettings,
 } from '@/lib/metadata/metadataServerSettings.ts';
 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';

 type ExtensionsSettings = Pick<GqlServerSettings, 'maxSourcesInParallel' | 'localSourcePath' | 'extensionRepos'>;
@@ -71,7 +71,7 @@ export const BrowseSettings = () => {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('BrowseSettings::refetch'))}
--- a/src/screens/settings/Categories.tsx
+++ b/src/screens/settings/Categories.tsx
@@ -35,7 +35,7 @@ import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { TCategory } from '@/typings.ts';
 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';

 const getItemStyle = (
@@ -144,7 +144,7 @@ export function Categories() {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('category.error.label.request_failure')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('Categories::refetch'))}
--- a/src/screens/settings/DefaultReaderSettings.tsx
+++ b/src/screens/settings/DefaultReaderSettings.tsx
@@ -19,7 +19,7 @@ import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions
 import { makeToast } from '@/components/util/Toast';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';

 export function DefaultReaderSettings() {
@@ -58,7 +58,7 @@ export function DefaultReaderSettings() {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('DefaultReaderSettings::refetch'))}
--- a/src/screens/settings/DownloadSettings.tsx
+++ b/src/screens/settings/DownloadSettings.tsx
@@ -27,7 +27,7 @@ import { DeleteChaptersWhileReadingSetting } from '@/components/settings/downloa
 import { CategoriesInclusionSetting } from '@/components/settings/CategoriesInclusionSetting.tsx';
 import { NumberSetting } from '@/components/settings/NumberSetting.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';

 type DownloadSettingsType = Pick<
@@ -82,7 +82,7 @@ export const DownloadSettings = () => {
    const error = serverSettings.error ?? metadataServerSettingsError ?? categories.error;
    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => {
--- a/src/screens/settings/LibrarySettings.tsx
+++ b/src/screens/settings/LibrarySettings.tsx
@@ -25,7 +25,7 @@ import {
 } from '@/lib/metadata/metadataServerSettings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Mangas } from '@/lib/data/Mangas.ts';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';

@@ -84,7 +84,7 @@ export function LibrarySettings() {
    const error = serverSettings.error ?? metadataServerSettingsError ?? categories.error;
    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => {
--- a/src/screens/settings/ServerSettings.tsx
+++ b/src/screens/settings/ServerSettings.tsx
@@ -22,7 +22,7 @@ import { ServerSettings as GqlServerSettings } from '@/typings.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { SelectSetting } from '@/components/settings/SelectSetting.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';

 type ServerSettingsType = Pick<
@@ -112,7 +112,7 @@ export const ServerSettings = () => {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('ServerSettings::refetch'))}
--- a/src/screens/settings/TrackingSettings.tsx
+++ b/src/screens/settings/TrackingSettings.tsx
@@ -16,7 +16,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 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 { SettingsTrackerCard } from '@/components/tracker/SettingsTrackerCard.tsx';
 import {
@@ -45,7 +45,7 @@ export const TrackingSettings = () => {
    const trackers = data?.trackers.nodes ?? [];

    if (error) {
-        return <EmptyView message={error.message} />;
+        return <EmptyViewAbsoluteCentered message={error.message} />;
    }

    if (loading) {
--- a/src/screens/settings/WebUISettings.tsx
+++ b/src/screens/settings/WebUISettings.tsx
@@ -24,7 +24,7 @@ import {
 } from '@/components/settings/SelectSetting.tsx';
 import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
 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';

 type WebUISettingsType = Pick<
@@ -149,7 +149,7 @@ export const WebUISettings = () => {

    if (error) {
        return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                message={t('global.error.label.failed_to_load_data')}
                messageExtra={error.message}
                retry={() => refetch().catch(defaultPromiseErrorHandler('WebUISettings::refetch'))}