Trigger mx screen on http 503 internal response

app/root.tsx

@@ -61,42 +61,6 @@ export function ErrorBoundary() {
   const { status } = error;
   const loaderData = useRouteLoaderData<typeof loader>("root") || {};
 
-  if (loaderData.mx)
-    return (
-      <DocumentWrapper loaderData={{ ...loaderData, hide: true }}>
-        <Container
-          left="50%"
-          maxW="container.md"
-          pos="absolute"
-          top="50%"
-          transform="translate(-50%, -50%)"
-        >
-          <Flex>
-            <Spacer />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="128"
-              height="128"
-              fill="currentColor"
-              viewBox="0 0 16 16"
-            >
-              <path d="M12.496 8a4.5 4.5 0 0 1-1.703 3.526L9.497 8.5l2.959-1.11q.04.3.04.61" />
-              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-1 0a7 7 0 1 0-13.202 3.249l1.988-1.657a4.5 4.5 0 0 1 7.537-4.623L7.497 6.5l1 2.5 1.333 3.11c-.56.251-1.18.39-1.833.39a4.5 4.5 0 0 1-1.592-.29L4.747 14.2A7 7 0 0 0 15 8m-8.295.139a.25.25 0 0 0-.288-.376l-1.5.5.159.474.808-.27-.595.894a.25.25 0 0 0 .287.376l.808-.27-.595.894a.25.25 0 0 0 .287.376l1.5-.5-.159-.474-.808.27.596-.894a.25.25 0 0 0-.288-.376l-.808.27z" />
-            </svg>
-            <Spacer />
-          </Flex>
-          <br />
-          <Heading textAlign="center">
-            The engineers are breaking stuff again
-          </Heading>
-          <br />
-          <Text textAlign="center">
-            Someday they will finish, come back later.
-          </Text>
-        </Container>
-      </DocumentWrapper>
-    );
-
   switch (status) {
     case 303:
       return "";
@@ -132,6 +96,42 @@ export function ErrorBoundary() {
         </DocumentWrapper>
       );
 
+    case 503:
+      return (
+        <DocumentWrapper loaderData={{ hide: true }}>
+          <Container
+            left="50%"
+            maxW="container.md"
+            pos="absolute"
+            top="50%"
+            transform="translate(-50%, -50%)"
+          >
+            <Flex>
+              <Spacer />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="128"
+                height="128"
+                fill="currentColor"
+                viewBox="0 0 16 16"
+              >
+                <path d="M12.496 8a4.5 4.5 0 0 1-1.703 3.526L9.497 8.5l2.959-1.11q.04.3.04.61" />
+                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-1 0a7 7 0 1 0-13.202 3.249l1.988-1.657a4.5 4.5 0 0 1 7.537-4.623L7.497 6.5l1 2.5 1.333 3.11c-.56.251-1.18.39-1.833.39a4.5 4.5 0 0 1-1.592-.29L4.747 14.2A7 7 0 0 0 15 8m-8.295.139a.25.25 0 0 0-.288-.376l-1.5.5.159.474.808-.27-.595.894a.25.25 0 0 0 .287.376l.808-.27-.595.894a.25.25 0 0 0 .287.376l1.5-.5-.159-.474-.808.27.596-.894a.25.25 0 0 0-.288-.376l-.808.27z" />
+              </svg>
+              <Spacer />
+            </Flex>
+            <br />
+            <Heading textAlign="center">
+              The engineers are breaking stuff again
+            </Heading>
+            <br />
+            <Text textAlign="center">
+              Someday they will finish, come back later.
+            </Text>
+          </Container>
+        </DocumentWrapper>
+      );
+
     default:
       captureRemixErrorBoundaryError(useRouteError());
       return (
@@ -166,6 +166,11 @@ export async function loader({
 }: {
   context: RequestContext;
 }): Promise<{ [k: string]: any }> {
+  if (await context.env.DATA.get("mx"))
+    throw new Response(null, {
+      status: 503,
+    });
+
   let data: { [k: string]: string } = {};
 
   if (context.env.COMMIT_SHA) data.commit_sha = context.env.COMMIT_SHA;
@@ -174,10 +179,6 @@ export async function loader({
   if (context.data.nonce) data.nonce = context.data.nonce;
   if (context.data.theme) data.theme = context.data.theme;
 
-  try {
-    if (await context.env.DATA.get("mx")) data.mx = "1";
-  } catch {}
-
   return data;
 }