diff --git a/src/components/actions/composeButton/ComposeButton.tsx b/src/components/actions/composeButton/ComposeButton.tsx
index 7a31e0be..58f272e4 100644
--- a/src/components/actions/composeButton/ComposeButton.tsx
+++ b/src/components/actions/composeButton/ComposeButton.tsx
@@ -19,8 +19,6 @@ export default function ComposeButton(props: Props) {
       : "";
   const { openComposer } = useComposerControls();
 
-  const canUpdate = typeof window !== "undefined";
-
   return (
     <>
       {mode === "float" && (
@@ -28,8 +26,8 @@ export default function ComposeButton(props: Props) {
           onClick={() => openComposer({ mention: userHandle })}
           className="z-40 p-3.5 rounded-full fixed md:hidden right-3 bottom-24 bg-primary text-white hover:bg-primary-dark outline-none ease-linear transition-all"
           style={{
-            opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-            transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+            opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+            transform: val ? `translateY(${val ?? 0}%)` : "100%",
           }}
         >
           <RiQuillPenFill className="text-2xl" />
diff --git a/src/components/actions/refetch/Refetch.tsx b/src/components/actions/refetch/Refetch.tsx
index f9b1c078..66280000 100644
--- a/src/components/actions/refetch/Refetch.tsx
+++ b/src/components/actions/refetch/Refetch.tsx
@@ -14,15 +14,13 @@ export default function Refetch(props: Props) {
   const val = useScrollContext();
   const debouncedRefetch = useDebouncedCallback(onRefetch, 300);
 
-  const canUpdate = typeof window !== "undefined";
-
   return (
     <Button
       onClick={debouncedRefetch}
       className="z-40 p-3 rounded-full fixed bottom-24 md:bottom-8 ml-3 md:ml-[0.80rem] border border-neutral-300 bg-white hover:bg-neutral-50 hover:-rotate-180 ease-linear transition-all"
       style={{
-        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-        transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+        opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+        transform: val ? `translateY(${val ?? 0}%)` : "100%",
       }}
     >
       <LuRefreshCcw className="text-2xl text-neutral-500 hover:text-neutral-600" />
diff --git a/src/components/navigational/appBar/AppBar.tsx b/src/components/navigational/appBar/AppBar.tsx
index 692d708c..63ed2089 100644
--- a/src/components/navigational/appBar/AppBar.tsx
+++ b/src/components/navigational/appBar/AppBar.tsx
@@ -25,14 +25,12 @@ export default function AppBar() {
     refetchInterval: 10000,
   });
 
-  const canUpdate = typeof window !== "undefined";
-
   return (
     <nav
       className="flex justify-between pb-8 pt-1 px-6 border-t gap-6 fixed bottom-0 z-40 w-full md:hidden bg-white overflow-auto ease-linear transition-all"
       style={{
-        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-        transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+        opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+        transform: val ? `translateY(${val ?? 0}%)` : "100%",
       }}
     >
       <NavItem
diff --git a/src/components/navigational/feedTabs/FeedTabs.tsx b/src/components/navigational/feedTabs/FeedTabs.tsx
index ca072f8a..3bb323f7 100644
--- a/src/components/navigational/feedTabs/FeedTabs.tsx
+++ b/src/components/navigational/feedTabs/FeedTabs.tsx
@@ -28,16 +28,14 @@ export default function FeedTabs() {
     queryFn: () => getSavedFeeds(agent),
   });
 
-  const canUpdate = typeof window !== "undefined" && window.innerWidth < 768;
-
   return (
     <>
       <div className="z-40 hidden md:block fixed bg-white top-0 lg:p-5 md:p-5 max-w-xl w-full" />
       <div
         className={`bg-white border-x-0 border-t-0 border-b md:border md:rounded-t-2xl overflow-x-hidden hover:overflow-x-auto md:opacity-100 sticky top-[3.2rem] md:top-6 z-50 md:z-50 ease-linear transition-all`}
         style={{
-          opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-          transform: canUpdate ? `translateY(-${val ?? 0}%)` : "none",
+          opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+          transform: val ? `translateY(-${val ?? 0}%)` : "100%",
         }}
       >
         {isFetching && <FeedTabsSkeleton />}
diff --git a/src/components/navigational/topBar/TopBar.tsx b/src/components/navigational/topBar/TopBar.tsx
index c5d86d19..1aea579d 100644
--- a/src/components/navigational/topBar/TopBar.tsx
+++ b/src/components/navigational/topBar/TopBar.tsx
@@ -16,14 +16,12 @@ export default function TopBar(props: Props) {
   const { profile } = props;
   const val = useScrollContext();
 
-  const canUpdate = typeof window !== "undefined" && window.innerWidth < 768;
-
   return (
     <div
       className="flex justify-between bg-white border-b px-3 py-2.5 sticky md:hidden top-0 z-50 ease-linear transition-all"
       style={{
-        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-        transform: canUpdate ? `translateY(-${val ?? 0}%)` : "none",
+        opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+        transform: val ? `translateY(-${val ?? 0}%)` : "100%",
       }}
     >
       <Link
diff --git a/src/containers/FollowersContainer.tsx b/src/containers/FollowersContainer.tsx
index 24dd4337..1d86839e 100644
--- a/src/containers/FollowersContainer.tsx
+++ b/src/containers/FollowersContainer.tsx
@@ -17,7 +17,7 @@ interface Props {
 export default function FollowersContainer(props: Props) {
   const { handle } = props;
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,
diff --git a/src/containers/FollowingContainer.tsx b/src/containers/FollowingContainer.tsx
index 9ac8a9bc..3a95330c 100644
--- a/src/containers/FollowingContainer.tsx
+++ b/src/containers/FollowingContainer.tsx
@@ -17,7 +17,7 @@ interface Props {
 export default function FollowingContainer(props: Props) {
   const { handle } = props;
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,
diff --git a/src/containers/search/PostSearchContainer.tsx b/src/containers/search/PostSearchContainer.tsx
index 88273211..89c2d11c 100644
--- a/src/containers/search/PostSearchContainer.tsx
+++ b/src/containers/search/PostSearchContainer.tsx
@@ -37,7 +37,7 @@ export default function PostSearchContainer(props: Props) {
   const isEmpty =
     !isFetching && !isFetchingNextPage && posts?.pages[0]?.posts?.length === 0;
 
-  const { ref: observerRef, inView } = useInView();
+  const { ref: observerRef, inView } = useInView({ rootMargin: "800px" });
 
   useEffect(() => {
     if (inView) {
diff --git a/src/containers/search/UserSearchContainer.tsx b/src/containers/search/UserSearchContainer.tsx
index ebcac828..39300674 100644
--- a/src/containers/search/UserSearchContainer.tsx
+++ b/src/containers/search/UserSearchContainer.tsx
@@ -17,7 +17,7 @@ interface Props {
 export default function UserSearchContainer(props: Props) {
   const { query } = props;
   const agent = useAgent();
-  const { ref: observerRef, inView } = useInView();
+  const { ref: observerRef, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,
diff --git a/src/containers/settings/blockedUsersContainer/BlockedUsersContainer.tsx b/src/containers/settings/blockedUsersContainer/BlockedUsersContainer.tsx
index 756cb9da..7468bdc2 100644
--- a/src/containers/settings/blockedUsersContainer/BlockedUsersContainer.tsx
+++ b/src/containers/settings/blockedUsersContainer/BlockedUsersContainer.tsx
@@ -12,7 +12,7 @@ import LoadingSpinner from "@/components/status/loadingSpinner/LoadingSpinner";
 
 export default function BlockedUsersContainer() {
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,
diff --git a/src/containers/settings/mutedUsersContainer/MutedUsersContainer.tsx b/src/containers/settings/mutedUsersContainer/MutedUsersContainer.tsx
index 0343edbc..c1f3f4cd 100644
--- a/src/containers/settings/mutedUsersContainer/MutedUsersContainer.tsx
+++ b/src/containers/settings/mutedUsersContainer/MutedUsersContainer.tsx
@@ -12,7 +12,7 @@ import LoadingSpinner from "@/components/status/loadingSpinner/LoadingSpinner";
 
 export default function MutedUsersContainer() {
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,
diff --git a/src/containers/thread/LikedByContainer.tsx b/src/containers/thread/LikedByContainer.tsx
index 2c98b1a5..e3022936 100644
--- a/src/containers/thread/LikedByContainer.tsx
+++ b/src/containers/thread/LikedByContainer.tsx
@@ -19,7 +19,7 @@ export default function LikedByContainer(props: Props) {
   const { handle, id } = props;
 
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,
diff --git a/src/containers/thread/RepostedByContainer.tsx b/src/containers/thread/RepostedByContainer.tsx
index 0688c9c6..bdffc24f 100644
--- a/src/containers/thread/RepostedByContainer.tsx
+++ b/src/containers/thread/RepostedByContainer.tsx
@@ -19,7 +19,7 @@ export default function RepostedByContainer(props: Props) {
   const { handle, id } = props;
 
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,
diff --git a/src/lib/hooks/bsky/feed/useFeed.tsx b/src/lib/hooks/bsky/feed/useFeed.tsx
index eef676f1..c5fa96a2 100644
--- a/src/lib/hooks/bsky/feed/useFeed.tsx
+++ b/src/lib/hooks/bsky/feed/useFeed.tsx
@@ -8,7 +8,7 @@ export const useFeedKey = (feed: string) => [feed];
 
 export default function useFeed(feed: string) {
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "800px" });
   const {
     status,
     data: timeline,
diff --git a/src/lib/hooks/bsky/feed/useProfilePosts.tsx b/src/lib/hooks/bsky/feed/useProfilePosts.tsx
index 7671ac63..94c471bc 100644
--- a/src/lib/hooks/bsky/feed/useProfilePosts.tsx
+++ b/src/lib/hooks/bsky/feed/useProfilePosts.tsx
@@ -39,7 +39,7 @@ export default function useProfilePosts(props: Props) {
     }
   };
 
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
   const {
     status,
     data: userPosts,
diff --git a/src/lib/hooks/bsky/notification/useNotification.tsx b/src/lib/hooks/bsky/notification/useNotification.tsx
index 32d953c8..ba20d6de 100644
--- a/src/lib/hooks/bsky/notification/useNotification.tsx
+++ b/src/lib/hooks/bsky/notification/useNotification.tsx
@@ -1,7 +1,7 @@
 import { useInView } from "react-intersection-observer";
 import useAgent from "../useAgent";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import {
   getNotifications,
   updateSeenNotifications,
@@ -11,7 +11,7 @@ import { Notification } from "@atproto/api/dist/client/types/app/bsky/notificati
 
 export default function useNotification() {
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const groupNotifications = (
     notifications: Notification[]