Fix/hydration (#315)

hydration fix

---------

Co-authored-by: Igor Lobanov <igor.lobanov@onetwotrip.com>

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -64,18 +64,7 @@ export const AuthorBadge = (props: Props) => {
     return isSubscribing() ? t('subscribing...') : t('Subscribe')
   })
 
-  const unsubscribeValue = createMemo(() => {
-    if (props.iconButtons) {
-      return <Icon name="author-unsubscribe" class={stylesButton.icon} />
-    }
-
-    return (
-      <>
-        <span class={styles.actionButtonLabel}>{t('Following')}</span>
-        <span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>
-      </>
-    )
-  })
+  const unsubscribeValue = () => {}
 
   return (
     <div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
@@ -142,7 +131,19 @@ export const AuthorBadge = (props: Props) => {
               <Button
                 variant={props.iconButtons ? 'secondary' : 'bordered'}
                 size="M"
-                value={unsubscribeValue()}
+                value={
+                  <Show
+                    when={props.iconButtons}
+                    fallback={
+                      <>
+                        <span class={styles.actionButtonLabel}>{t('Following')}</span>
+                        <span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>
+                      </>
+                    }
+                  >
+                    <Icon name="author-unsubscribe" class={stylesButton.icon} />
+                  </Show>
+                }
                 onClick={() => handleSubscribe(false)}
                 isSubscribeButton={true}
                 class={clsx(styles.actionButton, {

src/components/Nav/Header/Header.tsx

@@ -528,9 +528,8 @@ export const Header = (props: Props) => {
             </ul>
           </div>
         </nav>
-        <ShowOnlyOnClient>
-          <Snackbar />
-        </ShowOnlyOnClient>
+
+        <Snackbar />
       </div>
     </header>
   )

src/components/Nav/Snackbar.tsx

@@ -4,6 +4,7 @@ import styles from './Snackbar.module.scss'
 import { Transition } from 'solid-transition-group'
 import { clsx } from 'clsx'
 import { Icon } from '../_shared/Icon'
+import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 
 export const Snackbar = () => {
   const { snackbarMessage } = useSnackbar()
@@ -15,20 +16,22 @@ export const Snackbar = () => {
         [styles.success]: snackbarMessage()?.type === 'success'
       })}
     >
-      <Transition
-        enterClass={styles.enter}
-        exitToClass={styles.exitTo}
-        onExit={(el, done) => setTimeout(() => done(), 300)}
-      >
-        <Show when={snackbarMessage()}>
-          <div class={styles.content}>
-            <Show when={snackbarMessage()?.type === 'success'}>
-              <Icon name="check-success" class={styles.icon} />
-            </Show>
-            {snackbarMessage().body}
-          </div>
-        </Show>
-      </Transition>
+      <ShowOnlyOnClient>
+        <Transition
+          enterClass={styles.enter}
+          exitToClass={styles.exitTo}
+          onExit={(el, done) => setTimeout(() => done(), 300)}
+        >
+          <Show when={snackbarMessage()}>
+            <div class={styles.content}>
+              <Show when={snackbarMessage()?.type === 'success'}>
+                <Icon name="check-success" class={styles.icon} />
+              </Show>
+              {snackbarMessage().body}
+            </div>
+          </Show>
+        </Transition>
+      </ShowOnlyOnClient>
     </div>
   )
 }