chore(workflows): Fix merge conflicts with master

2022-12-07 20:28:32 +01:00
parent 15c667fbd3 8efae2dfcf
commit 2b2ea157a6
890 changed files with 101176 additions and 38064 deletions
@@ -0,0 +1,19 @@
+import * as React from "react"
+import emitter from "../emitter"
+import { Indicator } from "./indicator"
+
+export function LoadingIndicatorEventHandler() {
+  const [visible, setVisible] = React.useState(false)
+
+  React.useEffect(() => {
+    emitter.on(`onDelayedLoadPageResources`, () => setVisible(true))
+    emitter.on(`onRouteUpdate`, () => setVisible(false))
+
+    return () => {
+      emitter.off(`onDelayedLoadPageResources`, () => setVisible(true))
+      emitter.off(`onRouteUpdate`, () => setVisible(false))
+    }
+  }, [])
+
+  return <Indicator visible={visible} />
+}
@@ -0,0 +1,65 @@
+import * as React from "react"
+import { ShadowPortal } from "../shadow-portal"
+import { Style } from "./style"
+import { isLoadingIndicatorEnabled } from "$virtual/loading-indicator"
+import { debugLog } from "../debug-log"
+
+if (typeof window === `undefined`) {
+  throw new Error(
+    `Loading indicator should never be imported in code that doesn't target only browsers`
+  )
+}
+
+if (module.hot) {
+  module.hot.accept(`$virtual/loading-indicator`, () => {
+    // isLoadingIndicatorEnabled is imported with ES import so no need
+    // for dedicated handling as HMR just replace it in that case
+  })
+}
+
+// HMR can rerun this, so check if it was set before
+// we also set it on window and not just in module scope because of HMR resetting
+// module scope
+if (typeof window.___gatsbyDidShowLoadingIndicatorBefore === `undefined`) {
+  window.___gatsbyDidShowLoadingIndicatorBefore = false
+}
+
+export function Indicator({ visible = true }) {
+  if (!isLoadingIndicatorEnabled()) {
+    return null
+  }
+
+  if (!window.___gatsbyDidShowLoadingIndicatorBefore) {
+    // not ideal to this in render function, but that's just console info
+    debugLog(
+      `A loading indicator is displayed in-browser whenever content is being requested upon navigation (Query On Demand).\n\nYou can disable the loading indicator for your current session by visiting ${window.location.origin}/___loading-indicator/disable`
+    )
+    window.___gatsbyDidShowLoadingIndicatorBefore = true
+  }
+
+  return (
+    <ShadowPortal identifier="gatsby-qod">
+      <Style />
+      <div
+        data-gatsby-loading-indicator="root"
+        // preact doesn't render data attributes with a literal bool false value to dom
+        data-gatsby-loading-indicator-visible={visible.toString()}
+        aria-live="assertive"
+      >
+        <div data-gatsby-loading-indicator="spinner" aria-hidden="true">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M0 0h24v24H0z" fill="none" />
+            <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z" />
+          </svg>
+        </div>
+        <div data-gatsby-loading-indicator="text">
+          {visible ? `Preparing requested page` : ``}
+        </div>
+      </div>
+    </ShadowPortal>
+  )
+}
@@ -0,0 +1,99 @@
+import React from "react"
+import { css } from "../css-to-object"
+
+export const Style = () => (
+  <style
+    dangerouslySetInnerHTML={{
+      __html: css`
+        :host {
+          --spinnerColor: #663399;
+          --borderLeft: #b17acc;
+          --background: #ffffff;
+          --color: #232129;
+          --radii: 4px;
+          --z-index-indicator: 10000;
+          --shadow: 0px 2px 4px rgba(46, 41, 51, 0.08),
+            0px 4px 8px rgba(71, 63, 79, 0.16);
+        }
+
+        [data-gatsby-loading-indicator="root"] {
+          font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+            Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+            "Segoe UI Symbol" !important;
+          background: var(--background);
+          color: var(--color);
+          position: fixed;
+          bottom: 1.5em;
+          left: 1.5em;
+          box-shadow: var(--shadow);
+          border-radius: var(--radii);
+          z-index: var(--z-index-indicator);
+          border-left: 0.25em solid var(--borderLeft);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: nowrap;
+          padding: 0.75em 1.15em;
+          min-width: 196px;
+        }
+
+        [data-gatsby-loading-indicator-visible="false"] {
+          opacity: 0;
+          visibility: hidden;
+          will-change: opacity, transform;
+          transform: translateY(45px);
+          transition: all 0.3s ease-in-out;
+        }
+
+        [data-gatsby-loading-indicator-visible="true"] {
+          opacity: 1;
+          visibility: visible;
+          transform: translateY(0px);
+          transition: all 0.3s ease-in-out;
+        }
+
+        [data-gatsby-loading-indicator="spinner"] {
+          animation: spin 1s linear infinite;
+          height: 18px;
+          width: 18px;
+          color: var(--spinnerColor);
+        }
+
+        [data-gatsby-loading-indicator="text"] {
+          margin-left: 0.75em;
+          line-height: 18px;
+        }
+
+        @keyframes spin {
+          0% {
+            transform: rotate(0);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          [data-gatsby-loading-indicator="spinner"] {
+            animation: none;
+          }
+          [data-gatsby-loading-indicator-visible="false"] {
+            transition: none;
+          }
+
+          [data-gatsby-loading-indicator-visible="true"] {
+            transition: none;
+          }
+        }
+
+        @media (prefers-color-scheme: dark) {
+          :host {
+            --spinnerColor: #f1defa;
+            --background: #232129;
+            --color: #ffffff;
+          }
+        }
+      `,
+    }}
+  />
+)