Truth for life fix

src/App.tsx

@@ -1059,36 +1059,23 @@ function HomepageNewsletterSection() {
 type TflWidgetType = 'audiodevo' | 'abdevotional'
 
 function TruthForLifeWidget({ type = 'audiodevo' }: { type?: TflWidgetType }) {
-  const containerId = `tfl-syndicate-container-${type}`
-
   useEffect(() => {
-    // Remove any previous instance of this script to allow re-init on re-mount
+    // TFL's script looks for #tfl-syndicate-container synchronously when it loads.
-    const existingScript = document.getElementById('tfl-syn-script-' + type)
+    // The div is already in the DOM by the time this effect runs, so we just
-    if (existingScript) existingScript.remove()
+    // inject the script and it will find and populate the container.
+    const existing = document.getElementById('tfl-syn-script')
+    if (existing) existing.remove()
 
-    // Clear the container so the widget can repopulate it
+    const container = document.getElementById('tfl-syndicate-container')
-    const container = document.getElementById(containerId)
     if (container) container.innerHTML = ''
 
     const script = document.createElement('script')
-    script.id = 'tfl-syn-script-' + type
+    script.id = 'tfl-syn-script'
     script.src = `https://www.truthforlife.org/static/js/responsive/lib/syndicate.js?type=${type}&id=458890`
-    script.type = 'text/javascript'
+    script.async = true
-    // The TFL script looks for #tfl-syndicate-container by ID — temporarily
-    // rename our container to match, then rename back after the script fires
-    if (container) container.id = 'tfl-syndicate-container'
     document.body.appendChild(script)
 
-    // Restore the namespaced id after a tick so React doesn't lose track
+    return () => { script.remove() }
-    const restore = setTimeout(() => {
-      const el = document.getElementById('tfl-syndicate-container')
-      if (el) el.id = containerId
-    }, 2000)
-
-    return () => {
-      clearTimeout(restore)
-      script.remove()
-    }
   }, [type])
 
   return (
@@ -1101,7 +1088,7 @@ function TruthForLifeWidget({ type = 'audiodevo' }: { type?: TflWidgetType }) {
         <p className="tfl-attribution">
           Teaching from <a href="https://www.truthforlife.org" target="_blank" rel="noreferrer" className="tfl-link">Truth For Life</a> with Alistair Begg
         </p>
-        <div id={containerId} className="tfl-widget-wrap" />
+        <div id="tfl-syndicate-container" className="tfl-widget-wrap" />
       </div>
     </section>
   )