From a0f516c5ee1a540d3ec3672d116f7bfb5a192242 Mon Sep 17 00:00:00 2001
From: Rakuraku Jyo <jyo.rakuraku@gmail.com>
Date: Mon, 18 Nov 2019 21:55:28 +0900
Subject: [PATCH 1/3] Lazy load the scripts needed for certain sources

---
 gatsby-browser.js | 46 ++++++++++++++++++++++++++++++++++++++++++++--
 gatsby-ssr.js     | 29 -----------------------------
 2 files changed, 44 insertions(+), 31 deletions(-)
 delete mode 100644 gatsby-ssr.js

diff --git a/gatsby-browser.js b/gatsby-browser.js
index abab293..2c2eca6 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,5 +1,30 @@
 /*global twttr instgrm*/
 
+const SCRIPTS = {
+  Twitter: "https://platform.twitter.com/widgets.js",
+  Instagram: "https://www.instagram.com/embed.js",
+  Flickr: "https://embedr.flickr.com/assets/client-code.js",
+  Reddit: "https://embed.redditmedia.com/widgets/platform.js"
+};
+
+const EMBED_ELEMENT = {
+  Twitter: ".twitter-tweet",
+  Instagram: "blockquote.instagram-media",
+  Flickr: '[data-flickr-embed="true"]',
+  Reddit: "blockquote.reddit-card"
+};
+
+const addScript = (d, src, id, callback) => {
+  const fjs = d.getElementsByTagName("script")[0];
+  if (d.getElementById(id)) return;
+  const js = d.createElement("script");
+  js.id = id;
+  js.src = src;
+  js.onload = callback;
+  fjs.parentNode.insertBefore(js, fjs);
+  return js;
+};
+
 const loadTwitter = () => {
   if (
     typeof twttr !== `undefined` &&
@@ -20,9 +45,26 @@ const processInstagram = () => {
   }
 };
 
+const load = (key, callback) => {
+  if (document.querySelector(EMBED_ELEMENT[key]))
+    addScript(document, SCRIPTS[key], `${key}-oembed`, callback);
+};
+
+const onIdle = callback => {
+  if (requestIdleCallback) {
+    requestIdleCallback(() => requestAnimationFrame(callback));
+  } else {
+    setTimeout(callback, 2000);
+  }
+};
+
 const initScripts = () => {
-  loadTwitter();
-  processInstagram();
+  onIdle(() => {
+    load("Twitter", loadTwitter);
+    load("Instagram", processInstagram);
+    load("Reddit");
+    load("Flickr");
+  });
 };
 
 exports.onInitialClientRender = initScripts;
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
deleted file mode 100644
index e79e49a..0000000
--- a/gatsby-ssr.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const React = require("react");
-const { amendOptions, filterProviderKeys } = require("./utils");
-
-const SCRIPTS = {
-  Twitter: "https://platform.twitter.com/widgets.js",
-  Instagram: "https://www.instagram.com/embed.js",
-  Flickr: "https://embedr.flickr.com/assets/client-code.js",
-  Reddit: "https://embed.redditmedia.com/widgets/platform.js"
-};
-
-const createScriptTag = (key, scriptSrc) => {
-  return React.createElement(
-    "script",
-    { src: scriptSrc, key: `gatsby-plugin-oembed-${key.toLowerCase()}` },
-    null
-  );
-};
-
-exports.onRenderBody = ({ setPostBodyComponents }, options) => {
-  options = amendOptions(options);
-
-  const scriptKeys = filterProviderKeys(
-    Object.keys(SCRIPTS),
-    options.providers
-  );
-
-  const scripts = scriptKeys.map(key => createScriptTag(key, SCRIPTS[key]));
-  setPostBodyComponents(scripts);
-};

From 56fdc3b215e6cfa825095307c8cec87b8a22bb51 Mon Sep 17 00:00:00 2001
From: Rakuraku Jyo <jyo.rakuraku@gmail.com>
Date: Wed, 22 Jan 2020 10:43:15 +0900
Subject: [PATCH 2/3] Should load after script added

---
 gatsby-browser.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/gatsby-browser.js b/gatsby-browser.js
index 2c2eca6..b0eceef 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -16,7 +16,10 @@ const EMBED_ELEMENT = {
 
 const addScript = (d, src, id, callback) => {
   const fjs = d.getElementsByTagName("script")[0];
-  if (d.getElementById(id)) return;
+  if (d.getElementById(id)) {
+    callback();
+    return;
+  }
   const js = d.createElement("script");
   js.id = id;
   js.src = src;

From 9ceebb29e86eab8ed5874e40492d962d0237995f Mon Sep 17 00:00:00 2001
From: Rakuraku Jyo <jyo.rakuraku@gmail.com>
Date: Wed, 22 Jan 2020 10:43:20 +0900
Subject: [PATCH 3/3] 0.1.3

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5979ddf..300b6b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@raae/gatsby-remark-oembed",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 3316f04..90e90a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raae/gatsby-remark-oembed",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "> A GatsbyJS Plugin that transforms oembed links into its corresponding embed code.",
   "keywords": [
     "gatsby",