From 4841b7464c1158f4c3ab45637272383f266500b2 Mon Sep 17 00:00:00 2001
From: Guillaume Fay <guillaume_fay@hotmail.com>
Date: Thu, 4 Jan 2024 16:14:58 +0100
Subject: [PATCH] fix: use Script cmp instead of custom hook

---
 hooks/bal-widget.js | 18 ------------------
 pages/_app.js       |  7 ++++---
 2 files changed, 4 insertions(+), 21 deletions(-)
 delete mode 100644 hooks/bal-widget.js

diff --git a/hooks/bal-widget.js b/hooks/bal-widget.js
deleted file mode 100644
index f6fd2499d..000000000
--- a/hooks/bal-widget.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import {useEffect} from 'react'
-
-export function useBALWidget() {
-    useEffect(() => {
-        if (!process.env.NEXT_PUBLIC_BAL_WIDGET_URL) {
-            return
-        }
-        const script = document.createElement('script')
-        script.src = `${process.env.NEXT_PUBLIC_BAL_WIDGET_URL}/bal-widget.js`
-        script.async = true
-        script.defer = true
-        document.body.appendChild(script)
-
-        return () => {
-            document.body.removeChild(script)
-        }
-    }, [])
-}
diff --git a/pages/_app.js b/pages/_app.js
index d62f79657..d570b3c28 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -9,10 +9,11 @@ import {init as matomoInit} from '@socialgouv/matomo-next'
 
 import '@/styles/template-data-gouv-to-dsfr/normalizer.css'
 import '@/styles/template-data-gouv-to-dsfr/main-alternate.css'
-import { useBALWidget } from '@/hooks/bal-widget'
+import Script from 'next/script'
 
 const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL
 const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID
+const BAL_WIDGET_URL = process.env.NEXT_PUBLIC_BAL_WIDGET_URL
 
 const {
   withDsfr,
@@ -27,8 +28,6 @@ export {dsfrDocumentApi}
 function MyApp({Component, pageProps}) {
   const {setIsDark} = useIsDark()
 
-  useBALWidget()
-
   useEffect(() => {
     setIsDark(false)
   }, [setIsDark])
@@ -46,6 +45,8 @@ function MyApp({Component, pageProps}) {
         <div id='alert-root' />
         <Component {...pageProps} />
       </DeviceContextProvider>
+      {BAL_WIDGET_URL && (
+        <Script src={`${process.env.NEXT_PUBLIC_BAL_WIDGET_URL}/bal-widget.js`} strategy='lazyOnload' />)}
       <style global jsx>{`
         body,
         html,