diff --git a/components/loading.tsx b/components/loading.tsx
index fb53a3d..6668a86 100644
--- a/components/loading.tsx
+++ b/components/loading.tsx
@@ -1,3 +1,4 @@
+import classnames from 'classnames'
 import Spinner from './spinner'
 
 export default function Loading({
@@ -7,9 +8,12 @@ export default function Loading({
   loading: boolean
   children: any
 }) {
+  const classNames = classnames({
+    'opacity-50': loading,
+  })
   return (
-    <div data-testid="wrapper" className="relative">
-      <div className={loading && 'opacity-50'}>{children}</div>
+    <div className="relative">
+      <div className={classNames}>{children}</div>
       {loading && (
         <div className="absolute inset-0 w-full h-full flex justify-center items-center pointer-events-node">
           <Spinner />