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(() => {
+  const unsubscribeValue = () => {}
-    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>
-      </>
-    )
-  })
 
   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>
       </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,6 +16,7 @@ export const Snackbar = () => {
         [styles.success]: snackbarMessage()?.type === 'success'
       })}
     >
+      <ShowOnlyOnClient>
         <Transition
           enterClass={styles.enter}
           exitToClass={styles.exitTo}
@@ -29,6 +31,7 @@ export const Snackbar = () => {
             </div>
           </Show>
         </Transition>
+      </ShowOnlyOnClient>
     </div>
   )
 }