From 54b064a1214e3a1fada9f3cd717e30196e82f0e3 Mon Sep 17 00:00:00 2001
From: Vuong Nguyen <vuongnm@devblock.net>
Date: Wed, 28 Aug 2024 16:20:45 +0700
Subject: [PATCH 1/3] adding a spinner until translations are ready to avoid
 flash of untranslated content

---
 src/components/@atoms/ErrorScreen.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/@atoms/ErrorScreen.tsx b/src/components/@atoms/ErrorScreen.tsx
index 1859267fd..a61226aee 100644
--- a/src/components/@atoms/ErrorScreen.tsx
+++ b/src/components/@atoms/ErrorScreen.tsx
@@ -4,6 +4,8 @@ import styled, { css } from 'styled-components'
 
 import { AlertSVG, QuestionCircleSVG, Typography } from '@ensdomains/thorin'
 
+import { LoadingContainer, SpinnerRow } from '../@molecules/ScrollBoxWithSpinner'
+
 const Container = styled.div(
   ({ theme }) => css`
     --icon-color: ${theme.colors.red};
@@ -48,7 +50,16 @@ const LinkWrapper = ({ children }: { children?: React.ReactNode }) => (
 type ErrorType = 'not-found' | 'application-error'
 
 const ErrorScreen = ({ errorType }: { errorType: ErrorType }) => {
-  const { t } = useTranslation('error', { keyPrefix: errorType })
+  const { t, ready } = useTranslation('error', { keyPrefix: errorType })
+
+  if (!ready) {
+    console.log('loading')
+    return (
+      <LoadingContainer>
+        <SpinnerRow />
+      </LoadingContainer>
+    )
+  }
 
   return (
     <Container className={errorType}>

From 947edec458727708cbc9fc6d3b12b57b93721d51 Mon Sep 17 00:00:00 2001
From: Vuong Nguyen <vuongnm@devblock.net>
Date: Wed, 28 Aug 2024 16:21:31 +0700
Subject: [PATCH 2/3] remove console.log

---
 src/components/@atoms/ErrorScreen.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/@atoms/ErrorScreen.tsx b/src/components/@atoms/ErrorScreen.tsx
index a61226aee..da5e0ceae 100644
--- a/src/components/@atoms/ErrorScreen.tsx
+++ b/src/components/@atoms/ErrorScreen.tsx
@@ -53,7 +53,6 @@ const ErrorScreen = ({ errorType }: { errorType: ErrorType }) => {
   const { t, ready } = useTranslation('error', { keyPrefix: errorType })
 
   if (!ready) {
-    console.log('loading')
     return (
       <LoadingContainer>
         <SpinnerRow />

From 3de06cbb13ba4df6964bffa7300ff91397d66dc3 Mon Sep 17 00:00:00 2001
From: Vuong Nguyen <vuongnm@devblock.net>
Date: Thu, 29 Aug 2024 14:02:48 +0700
Subject: [PATCH 3/3] return null (blank page) instead of the loading spinner
 page

---
 src/components/@atoms/ErrorScreen.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/@atoms/ErrorScreen.tsx b/src/components/@atoms/ErrorScreen.tsx
index da5e0ceae..7fe75c396 100644
--- a/src/components/@atoms/ErrorScreen.tsx
+++ b/src/components/@atoms/ErrorScreen.tsx
@@ -4,8 +4,6 @@ import styled, { css } from 'styled-components'
 
 import { AlertSVG, QuestionCircleSVG, Typography } from '@ensdomains/thorin'
 
-import { LoadingContainer, SpinnerRow } from '../@molecules/ScrollBoxWithSpinner'
-
 const Container = styled.div(
   ({ theme }) => css`
     --icon-color: ${theme.colors.red};
@@ -53,11 +51,7 @@ const ErrorScreen = ({ errorType }: { errorType: ErrorType }) => {
   const { t, ready } = useTranslation('error', { keyPrefix: errorType })
 
   if (!ready) {
-    return (
-      <LoadingContainer>
-        <SpinnerRow />
-      </LoadingContainer>
-    )
+    return null
   }
 
   return (