⚡ Make the google translate script lazy load.

layouts/partials/scripts.html

@@ -8,8 +8,15 @@
   {{ partialCached "_thirdparty/others/mermaid.html" . }}
 {{ end }}
 
-
-
-
-
-
+{{ if .Site.Params.footer.translate }}
+<script type="text/javascript">
+  document.addEventListener('DOMContentLoaded', () => {
+    const element = '#gtranslate';
+    if (!NexT.utils.checkDOMExist(element)) return;
+    NexT.utils.lazyLoadComponent(element).then(() => { 
+      window.translateelement_styles='/css/google-translate.min.css'; 
+      NexT.utils.getScript('/js/third-party/google-translate.min.js');
+    });
+  });
+</script>
+{{ end }}

layouts/partials/scripts/global.html

@@ -61,16 +61,7 @@
 {{- $search := resources.Get "js/third-party/search/algolia.js" }}
 {{- $nextjs = $nextjs | append $search }}
 {{ end }}
-{{ if .Site.Params.footer.translate }}
-{{- $gt := resources.Get "js/third-party/others/google-translate.js" }}
-{{- $nextjs = $nextjs | append $gt }}  
 
-{{ $gtCss := resources.Get "css/gt.scss" }}
-{{ $style := $gtCss | resources.ToCSS | minify }}
-<script type="text/javascript">
-  window.translateelement_styles = "{{- $style.RelPermalink -}}";
-</script>
-{{ end }}
 {{- $nextjs = $nextjs | resources.Concat "js/main.js"}}
 {{ if hugo.IsProduction }}
 {{- $nextjs = $nextjs | minify | fingerprint }}