diff --git a/src/components/LoadError.tsx b/src/components/LoadError.tsx
index 50998e7..7e1d229 100644
--- a/src/components/LoadError.tsx
+++ b/src/components/LoadError.tsx
@@ -1,5 +1,6 @@
import { ReactNode, useMemo } from "react";
import { LoadResultError } from "../data/useLoadEffect.ts";
+import css from "./Loading.module.css";
export type LoadErrorProps = {
operation: string;
@@ -19,10 +20,13 @@ function LoadError({ operation, result: { error, retry } }: LoadErrorProps) {
const formattedError = useMemo(() => formatError(error), [error]);
return (
-
-
{operation} failed
-
{formattedError}
-
+
+
+
+
{operation} failed
+
{formattedError}
+
+
);
}
diff --git a/src/components/Loading.module.css b/src/components/Loading.module.css
index d00504e..7b8a7e7 100644
--- a/src/components/Loading.module.css
+++ b/src/components/Loading.module.css
@@ -15,6 +15,8 @@
background-size: contain;
image-rendering: smooth;
position: relative;
+
+ filter: drop-shadow(11px 11px 4px rgba(0, 0, 0, 0.5));
}
.indicator::after {
@@ -35,6 +37,11 @@
animation-iteration-count: infinite;
}
+.errorIndicator.indicator::after {
+ animation: unset;
+ background-color: crimson;
+}
+
@keyframes controller-lights {
100%, 0% {
background-color: #457BFA;
@@ -77,4 +84,19 @@
.message {
margin-top: 1em;
color: #666666;
+ max-width: 800px;
+ text-align: center;
+ border-radius: 15px;
+ background-color: rgb(0, 0, 0, 0.5);
+ padding: 20px;
+}
+
+.errorMessage {
+ color: crimson;
+ font-weight: bold;
+ margin-bottom: 0.5em;
+}
+
+.errorDetails {
+ margin-bottom: 0.5em;
}