Refactor loading components and boundaries

components/generic/loading/boundaries.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, Suspense } from "react"
-import { LoadingMain } from "./renderers"
+import { LoadingInline, LoadingMain } from "./renderers"
 
 
 export type LoadingBoundaryProps = {
@@ -8,10 +8,18 @@ export type LoadingBoundaryProps = {
 }
 
 
-export function LoadingBoundaryPage({ text, children }: LoadingBoundaryProps) {
+export function LoadingBoundaryMain({ text, children }: LoadingBoundaryProps) {
     return (
         <Suspense fallback={<LoadingMain text={text} />}>
             {children}
         </Suspense>
     )
 }
+
+export function LoadingBoundaryInline({ text, children }: LoadingBoundaryProps) {
+    return (
+        <Suspense fallback={<LoadingInline text={text} />}>
+            {children}
+        </Suspense>
+    )
+}

components/generic/loading/renderers.tsx

@@ -2,6 +2,7 @@ import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
 import classNames from "classnames";
 import { memo } from "react";
 import { FestaIcon } from "../renderers/fontawesome";
+import { ViewNotice } from "../views/notice";
 import style from "./renderers.module.css"
 
 
@@ -60,3 +61,16 @@ export const LoadingMain = memo(({ text }: LoadingProps) => {
     )
 })
 LoadingMain.displayName = "LoadingMain"
+
+
+/**
+ * {@link ViewNotice} component displaying a {@link LoadingMain}.
+ */
+export const LoadingView = memo((props: LoadingProps) => {
+    return (
+        <ViewNotice
+            notice={<LoadingMain {...props} />}
+        />
+    )
+})
+LoadingView.displayName = "LoadingView"

pages/_app.tsx

@@ -9,7 +9,7 @@ import { PostcardRenderer } from '../components/postcard/renderer'
 import { config as fontAwesomeConfig } from '@fortawesome/fontawesome-svg-core'
 import { PostcardContextProvider } from '../components/postcard/provider'
 import defaultPostcard from "../public/postcards/adi-goldstein-Hli3R6LKibo-unsplash.jpg"
-import { LoadingBoundaryPage } from '../components/generic/loading/boundaries'
+import { LoadingBoundaryMain } from '../components/generic/loading/boundaries'
 
 
 fontAwesomeConfig.autoAddCss = false
@@ -26,9 +26,9 @@ const App = ({ Component, pageProps }: AppProps): JSX.Element => {
                         <AxiosSWRFetcherProvider>
                             <PostcardRenderer />
                             <ErrorBoundaryView text={t("genericError")}>
-                                <LoadingBoundaryPage>
+                                <LoadingBoundaryMain>
                                     <Component {...pageProps} />
-                                </LoadingBoundaryPage>
+                                </LoadingBoundaryMain>
                             </ErrorBoundaryView>
                         </AxiosSWRFetcherProvider>
                     </AuthContextProvider>