fix: Loading ui bug (#349)

Signed-off-by: Johannes Groß <mail@gross-johannes.de>
jo-gross · Aug 6, 2024 · be6a9ab · be6a9ab
1 parent 8c6e375
commit be6a9ab
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/pages/workspaces/[workspaceId]/manage/cards/[id].tsx b/pages/workspaces/[workspaceId]/manage/cards/[id].tsx
@@ -14,6 +14,7 @@ import { withPagePermission } from '../../../../../middleware/ui/withPagePermiss
 import { Role } from '@prisma/client';
 import { DeleteConfirmationModal } from '../../../../../components/modals/DeleteConfirmationModal';
 import _ from 'lodash';
+import { PageCenter } from '../../../../../components/layout/PageCenter';
 
 interface CocktailCardGroupError {
   name?: string;
@@ -82,7 +83,9 @@ function EditCocktailCard() {
   }, [id, workspaceId]);
 
   return loadingCard ? (
-    <Loading />
+    <PageCenter>
+      <Loading />
+    </PageCenter>
   ) : (
     <ManageEntityLayout
       backLink={`/workspaces/${workspaceId}/manage/cards`}

diff --git a/pages/workspaces/[workspaceId]/manage/cocktails/[id].tsx b/pages/workspaces/[workspaceId]/manage/cocktails/[id].tsx
@@ -8,6 +8,7 @@ import { withPagePermission } from '../../../../../middleware/ui/withPagePermiss
 import { Role } from '@prisma/client';
 import { FormikProps } from 'formik';
 import { CocktailRecipeFullWithImage } from '../../../../../models/CocktailRecipeFullWithImage';
+import { PageCenter } from '../../../../../components/layout/PageCenter';
 
 function EditCocktailRecipe() {
   const router = useRouter();
@@ -43,7 +44,9 @@ function EditCocktailRecipe() {
   }, [id, workspaceId]);
 
   return loading ? (
-    <Loading />
+    <PageCenter>
+      <Loading />
+    </PageCenter>
   ) : (
     <ManageEntityLayout backLink={`/workspaces/${workspaceId}/manage/cocktails`} title={'Cocktail'} unsavedChanges={unsavedChanges} formRef={formRef}>
       <CocktailRecipeForm cocktailRecipe={cocktailRecipe} setUnsavedChanges={setUnsavedChanges} formRef={formRef} />

diff --git a/pages/workspaces/[workspaceId]/manage/garnishes/[id].tsx b/pages/workspaces/[workspaceId]/manage/garnishes/[id].tsx
@@ -9,6 +9,7 @@ import { withPagePermission } from '../../../../../middleware/ui/withPagePermiss
 import { FormikProps } from 'formik';
 import { SingleFormLayout } from '../../../../../components/layout/SingleFormLayout';
 import { GarnishWithImage } from '../../../../../models/GarnishWithImage';
+import { PageCenter } from '../../../../../components/layout/PageCenter';
 
 function EditGarnishPage() {
   const router = useRouter();
@@ -44,7 +45,9 @@ function EditGarnishPage() {
   }, [id, workspaceId]);
 
   return loading ? (
-    <Loading />
+    <PageCenter>
+      <Loading />
+    </PageCenter>
   ) : (
     <ManageEntityLayout backLink={`/workspaces/${workspaceId}/manage/garnishes`} title={'Garnitur'} unsavedChanges={unsavedChanges} formRef={formRef}>
       <SingleFormLayout title={'Garnitur erfassen'}>

diff --git a/pages/workspaces/[workspaceId]/manage/glasses/[id].tsx b/pages/workspaces/[workspaceId]/manage/glasses/[id].tsx
@@ -9,6 +9,7 @@ import { withPagePermission } from '../../../../../middleware/ui/withPagePermiss
 import { FormikProps } from 'formik';
 import { SingleFormLayout } from '../../../../../components/layout/SingleFormLayout';
 import { GlassWithImage } from '../../../../../models/GlassWithImage';
+import { PageCenter } from '../../../../../components/layout/PageCenter';
 
 function EditGlassPage() {
   const router = useRouter();
@@ -44,7 +45,9 @@ function EditGlassPage() {
   }, [id, workspaceId]);
 
   return loading ? (
-    <Loading />
+    <PageCenter>
+      <Loading />
+    </PageCenter>
   ) : (
     <ManageEntityLayout backLink={`/workspaces/${workspaceId}/manage/glasses`} title={'Gläser'} unsavedChanges={unsavedChanges} formRef={formRef}>
       <SingleFormLayout title={'Glas erfassen'}>

diff --git a/pages/workspaces/[workspaceId]/manage/ingredients/[id].tsx b/pages/workspaces/[workspaceId]/manage/ingredients/[id].tsx
@@ -9,6 +9,7 @@ import { withPagePermission } from '../../../../../middleware/ui/withPagePermiss
 import { FormikProps } from 'formik';
 import { SingleFormLayout } from '../../../../../components/layout/SingleFormLayout';
 import { IngredientWithImage } from '../../../../../models/IngredientWithImage';
+import { PageCenter } from '../../../../../components/layout/PageCenter';
 
 function EditCocktailRecipe() {
   const router = useRouter();
@@ -44,7 +45,9 @@ function EditCocktailRecipe() {
   }, [id, workspaceId]);
 
   return loading ? (
-    <Loading />
+    <PageCenter>
+      <Loading />
+    </PageCenter>
   ) : (
     <ManageEntityLayout backLink={`/workspaces/${workspaceId}/manage/ingredients`} title={'Zutaten'} unsavedChanges={unsavedChanges} formRef={formRef}>
       <SingleFormLayout title={'Zutat erfassen'}>