From 2b7c75d26c8d9c8c321ca0bfc052339d75a86d55 Mon Sep 17 00:00:00 2001
From: Soxasora <sora@soxa.dev>
Date: Sun, 28 Sep 2025 12:19:04 +0200
Subject: [PATCH 1/3] refactor: a component for each embed; remove iframeRef
 dep that caused flashes

---
 components/embed.js | 188 ++++++++++++++++++++++----------------------
 1 file changed, 94 insertions(+), 94 deletions(-)

diff --git a/components/embed.js b/components/embed.js
index b336fc81ea..cada9fa959 100644
--- a/components/embed.js
+++ b/components/embed.js
@@ -6,7 +6,7 @@ import { Button } from 'react-bootstrap'
 import { TwitterTweetEmbed } from 'react-twitter-embed'
 import YouTube from 'react-youtube'
 
-function TweetSkeleton ({ className }) {
+const TweetSkeleton = ({ className }) => {
   return (
     <div className={classNames(styles.tweetsSkeleton, className)}>
       <div className={styles.tweetSkeleton}>
@@ -21,9 +21,46 @@ function TweetSkeleton ({ className }) {
   )
 }
 
-export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, darkMode, id }) {
+const TwitterEmbed = ({ id, className, topLevel }) => {
+  const [darkMode] = useDarkMode()
+  const [overflowing, setOverflowing] = useState(true)
   const [show, setShow] = useState(false)
+
+  return (
+    <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
+      <TwitterTweetEmbed
+        tweetId={id}
+        options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
+        key={darkMode ? '1' : '2'}
+        placeholder={<TweetSkeleton className={className} />}
+        onLoad={() => setOverflowing(true)}
+      />
+      {overflowing && !show &&
+        <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
+          show full tweet
+        </Button>}
+    </div>
+  )
+}
+
+const YouTubeEmbed = ({ id, className, start }) => {
+  return (
+    <div className={classNames(styles.videoWrapper, className)}>
+      <YouTube
+        videoId={id} className={styles.videoContainer} opts={{
+          playerVars: {
+            start: start || 0
+          }
+        }}
+      />
+    </div>
+  )
+}
+
+const NostrEmbed = ({ className, topLevel, id }) => {
   const iframeRef = useRef(null)
+  const [darkMode] = useDarkMode()
+  const [show, setShow] = useState(false)
 
   useEffect(() => {
     if (!iframeRef.current) return
@@ -52,7 +89,7 @@ export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel,
       window?.removeEventListener('message', setHeightFromIframe)
       iframeRef.current?.removeEventListener('load', handleIframeLoad)
     }
-  }, [iframeRef.current, darkMode])
+  }, [id, darkMode])
 
   return (
     <div className={classNames(styles.nostrContainer, !show && styles.twitterContained, className)}>
@@ -72,11 +109,10 @@ export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel,
         </Button>}
     </div>
   )
-})
+}
 
 const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
   const iframeRef = useRef(null)
-
   // https://open.spotify.com/track/1KFxcj3MZrpBGiGA8ZWriv?si=f024c3aa52294aa1
   // Remove any additional path segments
   const url = new URL(src)
@@ -97,7 +133,7 @@ const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
     }
 
     return () => { window.onSpotifyIframeApiReady = null }
-  }, [iframeRef.current, url.pathname])
+  }, [url.pathname])
 
   return (
     <div className={classNames(styles.spotifyWrapper, className)}>
@@ -117,101 +153,65 @@ const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
   )
 }
 
-const Embed = memo(function Embed ({ src, provider, id, meta, className, topLevel, onError }) {
-  const [darkMode] = useDarkMode()
-  const [overflowing, setOverflowing] = useState(true)
-  const [show, setShow] = useState(false)
-
-  // This Twitter embed could use similar logic to the video embeds below
-  if (provider === 'twitter') {
-    return (
-      <>
-        <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
-          <TwitterTweetEmbed
-            tweetId={id}
-            options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
-            key={darkMode ? '1' : '2'}
-            placeholder={<TweetSkeleton className={className} />}
-            onLoad={() => setOverflowing(true)}
-          />
-          {overflowing && !show &&
-            <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
-              show full tweet
-            </Button>}
-        </div>
-      </>
-    )
-  }
-
-  if (provider === 'nostr') {
-    return (
-      <NostrEmbed src={src} className={className} topLevel={topLevel} id={id} darkMode={darkMode} />
-    )
-  }
+const WavlakeEmbed = ({ id, className }) => {
+  return (
+    <div className={classNames(styles.wavlakeWrapper, className)}>
+      <iframe
+        src={`https://embed.wavlake.com/track/${id}`} width='100%' height='380' frameBorder='0'
+        allow='encrypted-media'
+        sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms allow-same-origin'
+      />
+    </div>
+  )
+}
 
-  if (provider === 'wavlake') {
-    return (
-      <div className={classNames(styles.wavlakeWrapper, className)}>
+const PeerTubeEmbed = ({ className, href }) => {
+  return (
+    <div className={classNames(styles.videoWrapper, className)}>
+      <div className={styles.videoContainer}>
         <iframe
-          src={`https://embed.wavlake.com/track/${id}`} width='100%' height='380' frameBorder='0'
-          allow='encrypted-media'
-          sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms allow-same-origin'
+          title='PeerTube Video'
+          allowFullScreen
+          src={href}
+          sandbox='allow-scripts'
         />
       </div>
-    )
-  }
-
-  if (provider === 'spotify') {
-    return (
-      <SpotifyEmbed src={src} className={className} />
-    )
-  }
+    </div>
+  )
+}
 
-  if (provider === 'youtube') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <YouTube
-          videoId={id} className={styles.videoContainer} opts={{
-            playerVars: {
-              start: meta?.start || 0
-            }
-          }}
+const RumbleEmbed = ({ className, href }) => {
+  return (
+    <div className={classNames(styles.videoWrapper, className)}>
+      <div className={styles.videoContainer}>
+        <iframe
+          title='Rumble Video'
+          allowFullScreen
+          src={href}
+          sandbox='allow-scripts'
         />
       </div>
-    )
-  }
-
-  if (provider === 'rumble') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <div className={styles.videoContainer}>
-          <iframe
-            title='Rumble Video'
-            allowFullScreen
-            src={meta?.href}
-            sandbox='allow-scripts'
-          />
-        </div>
-      </div>
-    )
-  }
+    </div>
+  )
+}
 
-  if (provider === 'peertube') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <div className={styles.videoContainer}>
-          <iframe
-            title='PeerTube Video'
-            allowFullScreen
-            src={meta?.href}
-            sandbox='allow-scripts'
-          />
-        </div>
-      </div>
-    )
+export default memo(function Embed ({ src, provider, id, meta, className, topLevel }) {
+  switch (provider) {
+    case 'twitter':
+      return <TwitterEmbed id={id} className={className} topLevel={topLevel} />
+    case 'youtube':
+      return <YouTubeEmbed id={id} className={className} start={meta?.start} />
+    case 'nostr':
+      return <NostrEmbed className={className} topLevel={topLevel} id={id} />
+    case 'spotify':
+      return <SpotifyEmbed src={src} className={className} />
+    case 'wavlake':
+      return <WavlakeEmbed id={id} className={className} />
+    case 'peertube':
+      return <PeerTubeEmbed className={className} href={meta?.href} />
+    case 'rumble':
+      return <RumbleEmbed className={className} href={meta?.href} />
+    default:
+      return null
   }
-
-  return null
 })
-
-export default Embed

From 2cfc025a1ffad7c228486179fc4dcf34e83d3a00 Mon Sep 17 00:00:00 2001
From: Soxasora <sora@soxa.dev>
Date: Sun, 28 Sep 2025 12:40:37 +0200
Subject: [PATCH 2/3] use client-side rendering for embeds; add Loading
 placeholder

---
 components/embed.js        | 28 ++++++++++++++++++++++++++++
 components/text.module.css | 20 +++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/components/embed.js b/components/embed.js
index cada9fa959..af9994f0ed 100644
--- a/components/embed.js
+++ b/components/embed.js
@@ -5,6 +5,29 @@ import styles from './text.module.css'
 import { Button } from 'react-bootstrap'
 import { TwitterTweetEmbed } from 'react-twitter-embed'
 import YouTube from 'react-youtube'
+import { useIsClient } from './use-client'
+import Moon from '@/svgs/moon-fill.svg'
+import Link from 'next/link'
+
+const Loading = ({ provider, src, className }) => {
+  let host = provider
+  try {
+    host = new URL(src).hostname
+  } catch (e) {
+    console.error(e)
+  }
+  return (
+    <div className={classNames(styles.embedLoading, className)}>
+      <div className={styles.embedLoadingMessage}>
+        <Moon className='spin fill-grey' />
+        <span>loading {provider}...</span>
+        <Link href={src} target='_blank' rel='noopener nofollow noreferrer'>
+          view on {host}
+        </Link>
+      </div>
+    </div>
+  )
+}
 
 const TweetSkeleton = ({ className }) => {
   return (
@@ -196,6 +219,11 @@ const RumbleEmbed = ({ className, href }) => {
 }
 
 export default memo(function Embed ({ src, provider, id, meta, className, topLevel }) {
+  const isClient = useIsClient()
+  if (!isClient) {
+    return <Loading provider={provider} src={src} className={className} />
+  }
+
   switch (provider) {
     case 'twitter':
       return <TwitterEmbed id={id} className={className} topLevel={topLevel} />
diff --git a/components/text.module.css b/components/text.module.css
index 586e255d27..e0c6dac11f 100644
--- a/components/text.module.css
+++ b/components/text.module.css
@@ -385,7 +385,7 @@
     padding: .75rem 1rem;
 }
 
-.tweetsSkeleton {
+.tweetsSkeleton, .embedLoading {
     display: flex;
     flex-flow: row wrap;
     max-width: 350px;
@@ -393,6 +393,24 @@
     padding-right: 12px;
 }
 
+.embedLoadingMessage {
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.4rem;
+    height: 150px;
+    width: 100%;
+    padding: 1.5rem;
+    background-color: var(--theme-commentBg);
+}
+
+.embedLoadingMessage svg {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 1rem;
+    margin-left: -0.15rem;
+}
+
 .topLevel .tweetsSkeleton, :global(.topLevel) .tweetsSkeleton {
     max-width: 550px;
 }

From 9eb4d1ffdb31ff8edf9ef7009710294925ccf3c1 Mon Sep 17 00:00:00 2001
From: Soxasora <sora@soxa.dev>
Date: Sun, 28 Sep 2025 15:13:58 +0200
Subject: [PATCH 3/3] client-side rendering to take advantage of iframe events,
 LoadingWrapper and Loading to mask iframes load states, return error
 component if 15 seconds have passed

---
 components/embed.js | 116 +++++++++++++++++++++++++++++++-------------
 1 file changed, 82 insertions(+), 34 deletions(-)

diff --git a/components/embed.js b/components/embed.js
index af9994f0ed..ecc9b61cde 100644
--- a/components/embed.js
+++ b/components/embed.js
@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState, useCallback } from 'react'
 import classNames from 'classnames'
 import useDarkMode from './dark-mode'
 import styles from './text.module.css'
@@ -6,10 +6,11 @@ import { Button } from 'react-bootstrap'
 import { TwitterTweetEmbed } from 'react-twitter-embed'
 import YouTube from 'react-youtube'
 import { useIsClient } from './use-client'
+import LoadErrorIcon from '@/svgs/file-warning-line.svg'
 import Moon from '@/svgs/moon-fill.svg'
 import Link from 'next/link'
 
-const Loading = ({ provider, src, className }) => {
+const Loading = ({ provider, src, className, error }) => {
   let host = provider
   try {
     host = new URL(src).hostname
@@ -19,8 +20,8 @@ const Loading = ({ provider, src, className }) => {
   return (
     <div className={classNames(styles.embedLoading, className)}>
       <div className={styles.embedLoadingMessage}>
-        <Moon className='spin fill-grey' />
-        <span>loading {provider}...</span>
+        {error ? <LoadErrorIcon className='fill-grey' /> : <Moon className='spin fill-grey' />}
+        <div>{error ? `${provider} embed is not available at the moment.` : `loading ${provider}...`}</div>
         <Link href={src} target='_blank' rel='noopener nofollow noreferrer'>
           view on {host}
         </Link>
@@ -29,6 +30,18 @@ const Loading = ({ provider, src, className }) => {
   )
 }
 
+const LoaderWrapper = ({ loading, provider, src, children }) => {
+  console.log('loading', loading)
+  return (
+    <>
+      {loading && <Loading provider={provider} src={src} />}
+      <div style={{ display: loading ? 'none' : 'block' }}>
+        {children}
+      </div>
+    </>
+  )
+}
+
 const TweetSkeleton = ({ className }) => {
   return (
     <div className={classNames(styles.tweetsSkeleton, className)}>
@@ -44,7 +57,7 @@ const TweetSkeleton = ({ className }) => {
   )
 }
 
-const TwitterEmbed = ({ id, className, topLevel }) => {
+const TwitterEmbed = ({ id, className, topLevel, ...props }) => {
   const [darkMode] = useDarkMode()
   const [overflowing, setOverflowing] = useState(true)
   const [show, setShow] = useState(false)
@@ -56,7 +69,8 @@ const TwitterEmbed = ({ id, className, topLevel }) => {
         options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
         key={darkMode ? '1' : '2'}
         placeholder={<TweetSkeleton className={className} />}
-        onLoad={() => setOverflowing(true)}
+        onLoad={() => { props.onLoad(); setOverflowing(true) }}
+        onError={props.onError}
       />
       {overflowing && !show &&
         <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
@@ -66,21 +80,25 @@ const TwitterEmbed = ({ id, className, topLevel }) => {
   )
 }
 
-const YouTubeEmbed = ({ id, className, start }) => {
+const YouTubeEmbed = ({ id, className, start, ...props }) => {
   return (
     <div className={classNames(styles.videoWrapper, className)}>
       <YouTube
-        videoId={id} className={styles.videoContainer} opts={{
+        videoId={id}
+        className={styles.videoContainer}
+        opts={{
           playerVars: {
             start: start || 0
           }
         }}
+        onReady={props.onLoad}
+        onError={props.onError}
       />
     </div>
   )
 }
 
-const NostrEmbed = ({ className, topLevel, id }) => {
+const NostrEmbed = ({ className, topLevel, id, ...props }) => {
   const iframeRef = useRef(null)
   const [darkMode] = useDarkMode()
   const [show, setShow] = useState(false)
@@ -124,6 +142,7 @@ const NostrEmbed = ({ className, topLevel, id }) => {
         frameBorder='0'
         sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox'
         allow=''
+        {...props}
       />
       {!show &&
         <Button size='md' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
@@ -134,7 +153,7 @@ const NostrEmbed = ({ className, topLevel, id }) => {
   )
 }
 
-const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
+const SpotifyEmbed = function SpotifyEmbed ({ src, className, ...props }) {
   const iframeRef = useRef(null)
   // https://open.spotify.com/track/1KFxcj3MZrpBGiGA8ZWriv?si=f024c3aa52294aa1
   // Remove any additional path segments
@@ -143,6 +162,8 @@ const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
 
   useEffect(() => {
     if (!iframeRef.current) return
+    console.log('useEffect', iframeRef.current)
+    console.log('useEffect', url.pathname)
 
     const id = url.pathname.split('/').pop()
 
@@ -156,7 +177,7 @@ const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
     }
 
     return () => { window.onSpotifyIframeApiReady = null }
-  }, [url.pathname])
+  }, [iframeRef.current, url.pathname])
 
   return (
     <div className={classNames(styles.spotifyWrapper, className)}>
@@ -171,24 +192,26 @@ const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
         allow='encrypted-media; clipboard-write;'
         style={{ borderRadius: '12px' }}
         sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-presentation'
+        {...props}
       />
     </div>
   )
 }
 
-const WavlakeEmbed = ({ id, className }) => {
+const WavlakeEmbed = ({ id, className, ...props }) => {
   return (
     <div className={classNames(styles.wavlakeWrapper, className)}>
       <iframe
         src={`https://embed.wavlake.com/track/${id}`} width='100%' height='380' frameBorder='0'
         allow='encrypted-media'
         sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms allow-same-origin'
+        {...props}
       />
     </div>
   )
 }
 
-const PeerTubeEmbed = ({ className, href }) => {
+const PeerTubeEmbed = ({ className, href, ...props }) => {
   return (
     <div className={classNames(styles.videoWrapper, className)}>
       <div className={styles.videoContainer}>
@@ -197,13 +220,14 @@ const PeerTubeEmbed = ({ className, href }) => {
           allowFullScreen
           src={href}
           sandbox='allow-scripts'
+          {...props}
         />
       </div>
     </div>
   )
 }
 
-const RumbleEmbed = ({ className, href }) => {
+const RumbleEmbed = ({ className, href, ...props }) => {
   return (
     <div className={classNames(styles.videoWrapper, className)}>
       <div className={styles.videoContainer}>
@@ -212,6 +236,7 @@ const RumbleEmbed = ({ className, href }) => {
           allowFullScreen
           src={href}
           sandbox='allow-scripts'
+          {...props}
         />
       </div>
     </div>
@@ -219,27 +244,50 @@ const RumbleEmbed = ({ className, href }) => {
 }
 
 export default memo(function Embed ({ src, provider, id, meta, className, topLevel }) {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+  const onLoad = useCallback(() => setLoading(false), [])
+  const onError = useCallback(() => setError(true), [])
+  const props = { onLoad, onError }
   const isClient = useIsClient()
-  if (!isClient) {
-    return <Loading provider={provider} src={src} className={className} />
-  }
 
-  switch (provider) {
-    case 'twitter':
-      return <TwitterEmbed id={id} className={className} topLevel={topLevel} />
-    case 'youtube':
-      return <YouTubeEmbed id={id} className={className} start={meta?.start} />
-    case 'nostr':
-      return <NostrEmbed className={className} topLevel={topLevel} id={id} />
-    case 'spotify':
-      return <SpotifyEmbed src={src} className={className} />
-    case 'wavlake':
-      return <WavlakeEmbed id={id} className={className} />
-    case 'peertube':
-      return <PeerTubeEmbed className={className} href={meta?.href} />
-    case 'rumble':
-      return <RumbleEmbed className={className} href={meta?.href} />
-    default:
-      return null
+  // after 15 seconds of loading, bail out
+  useEffect(() => {
+    if (loading) {
+      const timeout = setTimeout(() => {
+        setError(true)
+      }, 15000)
+
+      return () => clearTimeout(timeout)
+    }
+  }, [loading])
+
+  if (!isClient || error) {
+    return <Loading provider={provider} src={src} className={className} error={error} />
   }
+
+  return (
+    <LoaderWrapper loading={loading} provider={provider} src={src}>
+      {(() => {
+        switch (provider) {
+          case 'twitter':
+            return <TwitterEmbed id={id} className={className} topLevel={topLevel} {...props} />
+          case 'youtube':
+            return <YouTubeEmbed id={id} className={className} start={meta?.start} {...props} />
+          case 'nostr':
+            return <NostrEmbed className={className} topLevel={topLevel} id={id} {...props} />
+          case 'spotify':
+            return <SpotifyEmbed src={src} className={className} {...props} />
+          case 'wavlake':
+            return <WavlakeEmbed id={id} className={className} {...props} />
+          case 'peertube':
+            return <PeerTubeEmbed className={className} href={meta?.href} {...props} />
+          case 'rumble':
+            return <RumbleEmbed className={className} href={meta?.href} {...props} />
+          default:
+            return null
+        }
+      })()}
+    </LoaderWrapper>
+  )
 })