loader fixes

## What's changed

Show an image preview in the detail view when a field's `uiType` is `image`, instead of rendering it through the generic list cell renderer.

- Added `Avatar` from MUI and render a 120x120 rounded preview for `image` fields in `DetailFieldRenderer`
- All other field types keep their existing rendering via `ListCellRenderer`

## Files changed

- `react-openapi/src/components/fields/DetailFieldRenderer.tsx`

Reviewed-on: #14
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

react-openapi/src/components/fields/DetailFieldRenderer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Avatar } from "@mui/material";
 import type { FieldConfig } from "../../types";
 import { ListCellRenderer } from "./ListCellRenderer";
 
@@ -18,7 +18,11 @@ export function DetailFieldRenderer({ field, value, displayFormat, basePath }: D
       <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ mb: 0.25, display: "block" }}>
         {field.label}
       </Typography>
-      <ListCellRenderer field={field} value={value} displayFormat={displayFormat} basePath={basePath} />
+      {field.uiType === "image" ? (
+        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
+      ) : (
+        <ListCellRenderer field={field} value={value} displayFormat={displayFormat} basePath={basePath} />
+      )}
     </Box>
   );
 }

src/main.jsx

@@ -10,6 +10,7 @@ import {
 import {
   Box,
   CssBaseline,
+  CircularProgress,
   Toolbar
 } from "@mui/material";
 import Home from './Home';
@@ -81,8 +82,17 @@ const routerMapping = [
 
 /** Reads authConfig from AppProvider context and passes it to AuthProvider. */
 function AppContent() {
-  const { authConfig } = useAppContext();
+  const { authConfig, loading } = useAppContext();
   const navigate = useNavigate();
+
+  if (loading) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
   return (
     <AuthProvider authConfig={authConfig} onUnauthorized={() => navigate("/login")}>
       <AppTheme>