From 2a4330e0cbb309b98d813ef91b3f2f7e31637c22 Mon Sep 17 00:00:00 2001 From: Jackson Spears Date: Tue, 24 Sep 2024 12:55:43 -0400 Subject: [PATCH] Added svg preloading animation --- web/gatsby-browser.js | 1 + web/gatsby-ssr.js | 27 +- web/src/assets/svg/bouncing-circles.svg | 1 + web/src/styles/preloader.scss | 47 + web/static/preloader.js | 10 + yarn.lock | 3722 ++++++----------------- 6 files changed, 1082 insertions(+), 2726 deletions(-) create mode 100644 web/src/assets/svg/bouncing-circles.svg create mode 100644 web/src/styles/preloader.scss create mode 100644 web/static/preloader.js diff --git a/web/gatsby-browser.js b/web/gatsby-browser.js index 07ebbfc2..c3bc9175 100644 --- a/web/gatsby-browser.js +++ b/web/gatsby-browser.js @@ -14,3 +14,4 @@ import "@fontsource/open-sans" import "@fontsource/exo" import "@fontsource/exo-2" +import "./src/styles/preloader.scss" diff --git a/web/gatsby-ssr.js b/web/gatsby-ssr.js index f772f9cd..5b55d25a 100644 --- a/web/gatsby-ssr.js +++ b/web/gatsby-ssr.js @@ -1,7 +1,8 @@ -import * as React from "react" +import * as React from "react"; +import loadingSVG from "./src/assets/svg/bouncing-circles.svg" -export const onRenderBody = ({ setHeadComponents }) => { +export const onRenderBody = ({ setHeadComponents, setPreBodyComponents, setBodyAttributes, setPostBodyComponents }) => { setHeadComponents([ { type="font/woff" crossOrigin="anonymous" />, - ]); -}; \ No newline at end of file + + ]) + setPreBodyComponents([ +
+ +
+ ]) + setBodyAttributes({ + className: "preloader_active" + }) + setPostBodyComponents([ +