Remove react-page-scroller dependency and replace tailwind animation plugin

src/components/BeerById/BeerRecommendations.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link';
-import { FC, MutableRefObject, useRef } from 'react';
+import { FC } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
 import useBeerRecommendations from '@/hooks/data-fetching/beer-posts/useBeerRecommendations';
 import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
 import debounce from 'lodash/debounce';
+
 import BeerRecommendationLoadingComponent from './BeerRecommendationLoadingComponent';
 
 const BeerRecommendationsSection: FC<{
@@ -28,10 +29,8 @@ const BeerRecommendationsSection: FC<{
     },
   });
 
-  const beerRecommendationsRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
-
   return (
-    <div className="card h-full" ref={beerRecommendationsRef}>
+    <div className="card h-full">
       <div className="card-body">
         <>
           <div className="my-2 flex flex-row items-center justify-between">
@@ -54,6 +53,7 @@ const BeerRecommendationsSection: FC<{
                   <div
                     ref={isPenultimateBeerPost ? penultimateBeerPostRef : undefined}
                     key={post.id}
+                    className="animate-fade"
                   >
                     <div className="flex flex-col">
                       <Link className="link-hover link" href={`/beers/${post.id}`}>

src/components/Comments/CommentContentBody.tsx

@@ -7,6 +7,8 @@ import Link from 'next/link';
 import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
 
 import { z } from 'zod';
+import { useInView } from 'react-intersection-observer';
+import classNames from 'classnames';
 import CommentCardDropdown from './CommentCardDropdown';
 
 interface CommentContentBodyProps {
@@ -17,9 +19,16 @@ interface CommentContentBodyProps {
 const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMode }) => {
   const { user } = useContext(UserContext);
   const timeDistance = useTimeDistance(new Date(comment.createdAt));
+  const [ref, inView] = useInView({ triggerOnce: true });
 
   return (
-    <div className="space-y-1 py-4 pr-3 animate-in fade-in-10">
+    <div
+      className={classNames('space-y-1 py-4 pr-3 fade-in-10', {
+        'opacity-0': !inView,
+        'animate-fade': inView,
+      })}
+      ref={ref}
+    >
       <div className="space-y-2">
         <div className="flex flex-row justify-between">
           <div>

src/components/Comments/CommentLoadingCardBody.tsx

@@ -1,6 +1,6 @@
 const CommentLoadingCardBody = () => {
   return (
-    <div className="animate card-body h-52 fade-in-10">
+    <div className="card-body h-52 fade-in-10">
       <div className="flex animate-pulse space-x-4 slide-in-from-top">
         <div className="flex-1 space-y-4 py-1">
           <div className="h-4 w-3/4 rounded bg-base-100" />

src/components/Comments/EditCommentBody.tsx

@@ -15,6 +15,8 @@ import FormLabel from '../ui/forms/FormLabel';
 import FormSegment from '../ui/forms/FormSegment';
 import FormTextArea from '../ui/forms/FormTextArea';
 import { HandleDeleteCommentRequest, HandleEditCommentRequest } from './types';
+import { useInView } from 'react-intersection-observer';
+import classNames from 'classnames';
 
 interface EditCommentBodyProps {
   comment: z.infer<typeof CommentQueryResult>;
@@ -80,8 +82,16 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
 
   const disableForm = isSubmitting || isDeleting;
 
+  const [ref, inView] = useInView({ triggerOnce: true });
+
   return (
-    <div className="py-4 pr-3 animate-in fade-in-10">
+    <div
+      className={classNames('py-4 pr-3 animate-in fade-in-10', {
+        'opacity-0': !inView,
+        'animate-fade': inView,
+      })}
+      ref={ref}
+    >
       <form onSubmit={handleSubmit(onEdit)} className="space-y-3">
         <div>
           <FormInfo>

src/pages/404.tsx

@@ -8,7 +8,7 @@ const NotFound: NextPage = () => {
         <title>404 Page Not Found</title>
         <meta name="description" content="404 Page Not Found" />
       </Head>
-      <div className="mx-2 flex h-full flex-col items-center justify-center text-center lg:mx-0">
+      <div className="mx-2 flex h-dvh flex-col items-center justify-center text-center lg:mx-0">
         <h1 className="text-3xl font-bold lg:text-5xl">404: Not Found</h1>
         <h2 className="text-lg font-bold">
           Sorry, the page you are looking for does not exist.