🐛 fix(hydration): fix nextjs hydration errors

dashpresshq · May 3, 2024 · a5ca4eb · a5ca4eb
1 parent cddc99c
commit a5ca4eb
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 24 deletions.
diff --git a/src/frontend/components/ApplicationRoot/index.tsx b/src/frontend/components/ApplicationRoot/index.tsx
@@ -17,16 +17,16 @@ export function ApplicationRoot({
   translation?: Messages;
 }) {
   return (
-    <LinguiProvider translation={translation}>
-      <QueryProvider>
-        <PortalProvider>
+    <ThemeContextProvider>
+      <LinguiProvider translation={translation}>
+        <QueryProvider>
           <Toaster />
           <GlobalStyles />
-          <ThemeContextProvider>{children}</ThemeContextProvider>
           <ConfirmAlert />
-        </PortalProvider>
-        <GoogleTagManager />
-      </QueryProvider>
-    </LinguiProvider>
+          <PortalProvider>{children}</PortalProvider>
+          <GoogleTagManager />
+        </QueryProvider>
+      </LinguiProvider>
+    </ThemeContextProvider>
   );
 }
diff --git a/src/frontend/design-system/components/ComponentIsLoading/index.tsx b/src/frontend/design-system/components/ComponentIsLoading/index.tsx
@@ -38,13 +38,19 @@ const Lds = styled.div`
   }
 `;
 
+const Root = styled.div`
+  text-align: center;
+  margin: 30px;
+  margin-bottom: 20px;
+`;
+
 export function ComponentIsLoading() {
   return (
-    <div style={{ textAlign: "center", margin: "30px", marginBottom: "20px" }}>
+    <Root>
       <LdsWrapper>
         <Lds />
         <Lds />
       </LdsWrapper>
-    </div>
+    </Root>
   );
 }
diff --git a/src/frontend/design-system/components/ListManager/ListManagerItem/index.tsx b/src/frontend/design-system/components/ListManager/ListManagerItem/index.tsx
@@ -22,9 +22,9 @@ const ChevronRight = styled(ChevronRightIcon)<{ $active?: boolean }>`
 `;
 
 const ListItem = styled.button<{
-  active: boolean;
-  disabled: boolean;
-  size?: "xs";
+  $active: boolean;
+  $disabled: boolean;
+  $size?: "xs";
 }>`
   justify-content: space-between;
   align-items: center;
@@ -58,16 +58,16 @@ const ListItem = styled.button<{
     border-top: 0;
   }
 
-  ${({ disabled }) =>
-    disabled &&
+  ${({ $disabled }) =>
+    $disabled &&
     css`
       color: ${USE_ROOT_COLOR("muted-text")};
       pointer-events: none;
       background-color: ${USE_ROOT_COLOR("base-color")};
     `}
 
-  ${({ size }) =>
-    size === "xs" &&
+  ${({ $size }) =>
+    $size === "xs" &&
     css`
       padding: 6px 0.75rem;
       font-size: 12px;
@@ -81,8 +81,8 @@ const ListItem = styled.button<{
     background-color: ${USE_ROOT_COLOR("soft-color")};
   }
 
-  ${({ active }) =>
-    active &&
+  ${({ $active }) =>
+    $active &&
     css`
       z-index: 2;
       color: ${USE_ROOT_COLOR("text-on-primary")} !important;
@@ -234,9 +234,9 @@ export function ListManagerItem({
   );
 
   const buttonProps = {
-    active: !!active,
-    disabled: !!disabled,
-    size,
+    $active: !!active,
+    $disabled: !!disabled,
+    $size: size,
   };
 
   if (typeof action === "string") {

diff --git a/src/translations/locales/pseudo.po b/src/translations/locales/pseudo.po
@@ -17,10 +17,10 @@ msgid ""
 msgstr ""
 
 msgid "[[ name ]] is an invalid date"
-msgstr "[[ name ]] is an invalid date"
+msgstr ""
 
 msgid "[[ name ]] is an invalid email"
-msgstr "[[ name ]] is an invalid email"
+msgstr ""
 
 msgid "[[ name ]] is an invalid json"
 msgstr ""