diff --git a/src/components/repo/RepoStarCount.tsx b/src/components/repo/RepoStarCount.tsx
index 6b736b3..6d50d96 100644
--- a/src/components/repo/RepoStarCount.tsx
+++ b/src/components/repo/RepoStarCount.tsx
@@ -1,6 +1,7 @@
 import type { Did } from '@atcute/lexicons'
 import { IconStar } from '@tabler/icons-react'
 import { useRepoStarCount } from '../../hooks/useRepoStarCount'
+import { useElementVisibility } from '../../hooks/useElementVisibility'
 import { RepoActionControl } from './RepoActionControl'
 
 type RepoStarCountProps = {
@@ -9,7 +10,8 @@ type RepoStarCountProps = {
 }
 
 export function RepoStarCount({ repoDid, variant = 'count' }: RepoStarCountProps) {
-  const { starCount, hasFailed } = useRepoStarCount(repoDid)
+  const { elementRef, isVisible } = useElementVisibility()
+  const { starCount, hasFailed } = useRepoStarCount(repoDid, isVisible)
 
   if (repoDid === undefined) return null
 
@@ -17,19 +19,23 @@ export function RepoStarCount({ repoDid, variant = 'count' }: RepoStarCountProps
 
   if (variant === 'action') {
     return (
-      <RepoActionControl ariaLabel="Star repository" count={count} countLabel={`${count} stars`}>
-        <IconStar size={16} stroke={1.75} aria-hidden="true" className="text-ctp-yellow" />
-      </RepoActionControl>
+      <span ref={elementRef}>
+        <RepoActionControl ariaLabel="Star repository" count={count} countLabel={`${count} stars`}>
+          <IconStar size={16} stroke={1.75} aria-hidden="true" className="text-ctp-yellow" />
+        </RepoActionControl>
+      </span>
     )
   }
 
   return (
-    <span
-      className="inline-flex shrink-0 items-center gap-1 font-mono text-sm leading-none tabular-nums text-ctp-yellow"
-      aria-label={`${count} stars`}
-    >
-      <IconStar size={16} stroke={1.75} aria-hidden="true" />
-      {count}
+    <span ref={elementRef}>
+      <span
+        className="inline-flex shrink-0 items-center gap-1 font-mono text-sm leading-none tabular-nums text-ctp-yellow"
+        aria-label={`${count} stars`}
+      >
+        <IconStar size={16} stroke={1.75} aria-hidden="true" />
+        {count}
+      </span>
     </span>
   )
 }
diff --git a/src/hooks/useRepoStarCount.ts b/src/hooks/useRepoStarCount.ts
index 2f6e613..fb6f47d 100644
--- a/src/hooks/useRepoStarCount.ts
+++ b/src/hooks/useRepoStarCount.ts
@@ -2,14 +2,14 @@ import type { Did } from '@atcute/lexicons'
 import { useEffect, useState } from 'react'
 import { countStars } from '../lib/tangled/feed'
 
-export function useRepoStarCount(repoDid?: Did) {
+export function useRepoStarCount(repoDid?: Did, isEnabled = true) {
   const [starCount, setStarCount] = useState<number | null>(null)
   const [hasFailed, setHasFailed] = useState(false)
 
   useEffect(() => {
     setStarCount(null)
     setHasFailed(false)
-    if (repoDid === undefined) return
+    if (repoDid === undefined || !isEnabled) return
 
     let isCancelled = false
     countStars(repoDid)
@@ -23,7 +23,7 @@ export function useRepoStarCount(repoDid?: Did) {
     return () => {
       isCancelled = true
     }
-  }, [repoDid])
+  }, [isEnabled, repoDid])
 
   return { starCount, hasFailed }
 }