Merge pull request #525 from metaplex-foundation/feat/loader

feat: simple loader

js/packages/web/src/components/Loader/index.less

@@ -0,0 +1,84 @@
+.loader-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgb(0 0 0 / 48%);
+  z-index: 1;
+  display: none;
+
+  &.active {
+    display: block;
+  }
+
+  .loader-block {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+
+    font-size: 1.7em;
+    letter-spacing: 0.16em;
+  }
+
+  .loader-title {
+    color: #fff;
+    text-transform: uppercase;
+  }
+}
+
+.spinner {
+  margin-top: 0.5em;
+
+  .line {
+    width: 2px;
+    height: 24px;
+    background: #fff;
+    margin: 0 6px;
+    display: inline-block;
+    animation: spinner-line 1000ms infinite ease-in-out;
+  }
+
+  .line-1 {
+    animation-delay: 800ms;
+  }
+  .line-2 {
+    animation-delay: 600ms;
+  }
+  .line-3 {
+    animation-delay: 400ms;
+  }
+  .line-4 {
+    animation-delay: 200ms;
+  }
+  .line-6 {
+    animation-delay: 200ms;
+  }
+  .line-7 {
+    animation-delay: 400ms;
+  }
+  .line-8 {
+    animation-delay: 600ms;
+  }
+  .line-9 {
+    animation-delay: 800ms;
+  }
+}
+
+@keyframes spinner-line {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

js/packages/web/src/components/Loader/index.tsx

@@ -0,0 +1,34 @@
+import { useMeta } from '@oyster/common';
+import React, { FC } from 'react';
+
+export const LoaderProvider: FC = ({ children }) => {
+  const { isLoading } = useMeta();
+
+  return (
+    <>
+      <div className={`loader-container ${isLoading ? 'active' : ''}`}>
+        <div className="loader-block">
+          <div className="loader-title">loading</div>
+          <Spinner />
+        </div>
+      </div>
+      {children}
+    </>
+  );
+};
+
+export const Spinner = () => {
+  return (
+    <div className="spinner">
+      <span className="line line-1" />
+      <span className="line line-2" />
+      <span className="line line-3" />
+      <span className="line line-4" />
+      <span className="line line-5" />
+      <span className="line line-6" />
+      <span className="line line-7" />
+      <span className="line line-8" />
+      <span className="line line-9" />
+    </div>
+  );
+};

js/packages/web/src/providers.tsx

@@ -5,29 +5,32 @@ import {
   WalletProvider,
   MetaProvider,
 } from '@oyster/common';
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { ConfettiProvider } from './components/Confetti';
 import { AppLayout } from './components/Layout';
+import { LoaderProvider } from './components/Loader';
 import { CoingeckoProvider } from './contexts/coingecko';
 
 export const Providers: FC = ({ children }) => {
   return (
     <ConnectionProvider>
       <WalletProvider>
-          <AccountsProvider>
-            <CoingeckoProvider>
-              <StoreProvider
-                ownerAddress={process.env.NEXT_PUBLIC_STORE_OWNER_ADDRESS}
-                storeAddress={process.env.NEXT_PUBLIC_STORE_ADDRESS}
-              >
-                <MetaProvider>
+        <AccountsProvider>
+          <CoingeckoProvider>
+            <StoreProvider
+              ownerAddress={process.env.NEXT_PUBLIC_STORE_OWNER_ADDRESS}
+              storeAddress={process.env.NEXT_PUBLIC_STORE_ADDRESS}
+            >
+              <MetaProvider>
+                <LoaderProvider>
                   <ConfettiProvider>
                     <AppLayout>{children}</AppLayout>
                   </ConfettiProvider>
-                </MetaProvider>
-              </StoreProvider>
-            </CoingeckoProvider>
-          </AccountsProvider>
+                </LoaderProvider>
+              </MetaProvider>
+            </StoreProvider>
+          </CoingeckoProvider>
+        </AccountsProvider>
       </WalletProvider>
     </ConnectionProvider>
   );

js/packages/web/src/styles/index.less

@@ -23,3 +23,4 @@
 @import '../components/ArtCard/index.less';
 @import '../components/ArtistCard/index.less';
 @import '../components/Notifications/index.less';
+@import '../components/Loader/index.less';