From 2380a0b667e3f9cafd1fffef285e8b4d1488501f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 2 Oct 2023 11:24:07 -0500
Subject: [PATCH] ScrollTopButton: render null when not visible

---
 src/components/scroll-top-button.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 4498e3657..0ce00ffc6 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
@@ -35,10 +34,6 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
 
   const visible = count > 0 && scrolled;
 
-  const classes = clsx('fixed left-1/2 top-20 z-50 -translate-x-1/2', {
-    'hidden': !visible,
-  });
-
   const getScrollTop = (): number => {
     return (document.scrollingElement || document.documentElement).scrollTop;
   };
@@ -80,8 +75,12 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
     maybeUnload();
   }, [count]);
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <div className={classes}>
+    <div className='fixed left-1/2 top-20 z-50 -translate-x-1/2'>
       <button
         className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100'
         onClick={handleClick}
@@ -91,11 +90,9 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
           src={require('@tabler/icons/arrow-bar-to-up.svg')}
         />
 
-        {(count > 0) && (
-          <Text theme='inherit' size='sm'>
-            {intl.formatMessage(message, { count })}
-          </Text>
-        )}
+        <Text theme='inherit' size='sm'>
+          {intl.formatMessage(message, { count })}
+        </Text>
       </button>
     </div>
   );