Revize f456d0a0

re #9369 map placeholder

frontend/src/features/Catalog/CatalogItemDetail.tsx

@@ -1 @@
-import { Divider, Grid, Paper, Typography } from '@mui/material'
+import { Box, Divider, Grid, Paper, Skeleton, Typography } from '@mui/material'
 import { Fragment, ReactNode } from 'react'
 import { CatalogItemDto } from '../../swagger/data-contracts'
 
@@ -21 +21 @@
         <Fragment>
             <Grid sx={{ my: 2 }} container justifyContent="space-around">
                 <Grid item xs={8} sx={{ px: 1 }}>
-                    <Typography>{rowName}</Typography>
+                    <Typography fontWeight={500}>{rowName}</Typography>
                 </Grid>
                 <Grid item xs={4} sx={{ ml: 'auto' }}>
                     {items.map((item) => (
@@ -56 +56 @@
         },
         {
             rowName: 'Coordinates',
-            items: [`${item.longitude} ${item.latitude}`],
+            items: [`${item.longitude}°, ${item.latitude}°`],
         },
 
         {
@@ -73 +73 @@
 
     return (
         // TODO remove min height
-        <Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
+        <Paper style={{ minHeight: '100vh', borderRadius: 0 }} elevation={2}>
             <Grid container justifyContent="space-around">
                 {/* <Paper style={{ minHeight: '100vh', borderRadius: 0 }}> */}
                 <Grid item xs={6} sx={{ px: 2 }}>
@@ -91 +91 @@
                 </Grid>
 
                 <Grid item xs={6}>
-                    {/* Map */}
+                    <Box sx={{ px: 2, py: 4 }}>
+                        <Typography variant="h4" sx={{mb: 4}} fontWeight="bold">Map</Typography>
+
+                        <Skeleton
+                        animation="pulse"
+                            variant="rectangular"
+                            width={'100%'}
+                            height={400}
+                        />
+                        {/* <Skeleton animation="wave" />
+                        <Skeleton animation="wave" />
+                        <Skeleton animation="wave" />
+                        <Skeleton animation="wave" /> */}
+                    </Box>
                 </Grid>
                 {/* </Paper> */}
             </Grid>

frontend/src/features/Catalog/catalogSlice.ts

@@ -32 +32 @@
         builder.addCase(getCatalogItems.rejected, (state, action) => ({
             ...state, lastErr: action.payload as string
         }))
+        builder.addCase(getCatalogItem.fulfilled, (state, action) => ({
+            ...state, catalogItem: action.payload, isItemLoading: false,
+        }))
+        builder.addCase(getCatalogItem.rejected, (state, action) => ({
+            ...state, lastErr: action.payload as string
+        }))
     },
 })