Merge pull request #1518 from ecency/feature/added-global-loader

Added global loader while page is loading first time
ecency · Nov 26, 2023 · 072d3a2 · 072d3a2
2 parents 30160ea + 2cdc0ed
commit 072d3a2
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 25 deletions.
diff --git a/src/common/app.tsx b/src/common/app.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Route, Switch } from "react-router-dom";
 import EntryIndexContainer from "./pages/index";
 import { EntryScreen } from "./pages/entry";
@@ -28,6 +28,8 @@ import { useMappedStore } from "./store/use-mapped-store";
 import { EntriesCacheManager } from "./core";
 
 import { UserActivityRecorder } from "./components/user-activity-recorder";
+import { useGlobalLoader } from "./util/use-global-loader";
+import useMount from "react-use/lib/useMount";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -79,8 +81,12 @@ const DecksPage = loadable(() => import("./pages/decks"));
 
 const App = (props: any) => {
   const { global } = useMappedStore();
+  const { hide } = useGlobalLoader();
+
+  useMount(() => {
+    // Drop hiding from main queue to give React time to render
+    setTimeout(() => hide(), 1);
 
-  useEffect(() => {
     let pathname = window.location.pathname;
     if (pathname !== "/faq") {
       const currentLang = ls.get("current-language");
@@ -89,7 +95,7 @@ const App = (props: any) => {
         i18n.changeLanguage(currentLang);
       }
     }
-  }, []);
+  });
 
   return (
     <EntriesCacheManager>

diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -203,7 +203,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-a1cc9845-d2bb-4d53-b31a-443119a1fc53"
+      id="editor-tool-emoji-picker-2b0bdaf3-1d21-4569-ab93-7223d93b6af0"
       role="none"
       title="Emoji"
     >
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-e0f444b6-152e-4fe9-9756-80bfd584c550"
+      id="editor-tool-emoji-picker-399e6b28-feb3-4280-bb6a-693d6f4eddf8"
       role="none"
       title="Emoji"
     >

diff --git a/src/common/components/decks/columns/deck-items/deck-search-list-item.tsx b/src/common/components/decks/columns/deck-items/deck-search-list-item.tsx
@@ -177,7 +177,7 @@ export const SearchListItem = ({
   return (
     <div ref={ref} className="flex flex-col border-b border-[--border-color] p-3">
       <div className="deck-body flex flex-col w-full">
-        <div className="text-dark flex flex-col">
+        <div className="text-dark-default flex flex-col">
           <div className="flex items-center grow hot-item-link">
             {author && (
               <img

diff --git a/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap
@@ -405,7 +405,7 @@ exports[`(3) Active user. Trending filter 1`] = `
                   className="col-span-12 md:col-span-5 p-0 md:px-3"
                 >
                   <div
-                    className="text-4xl mb-2 md:mb-4 text-dark font-bold"
+                    className="text-4xl mb-2 md:mb-4 text-dark-default font-bold"
                   >
                     Friends
                   </div>
@@ -588,7 +588,7 @@ exports[`(3) Active user. Trending filter 1`] = `
                     className="col-span-12 md:col-span-5 p-0 md:px-3"
                   >
                     <div
-                      className="text-4xl mb-2 md:mb-4 text-dark font-bold"
+                      className="text-4xl mb-2 md:mb-4 text-dark-default font-bold"
                     >
                       Friends
                     </div>

diff --git a/src/common/components/entry-votes/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-votes/__snapshots__/index.spec.tsx.snap
@@ -63,7 +63,7 @@ exports[`(2) No votes 1`] = `
 exports[`(3) Render of detail with votes 1`] = `
 Array [
   <div
-    className="text-sm p-3 rounded-[1rem] bg-warning-040 border border-warning-030 text-warning-default"
+    className="text-sm p-3 rounded-[1rem] bg-warning-040 border border-warning-030 text-orange dark:bg-opacity-[20%] dark:border-opacity-[20%] dark:text-warning-default mb-4"
   >
     Content has pending votes. Please, wait a minute and refresh this dialog to see new votes.
   </div>,

diff --git a/src/common/components/introduction/__snapshots__/index.spec.tsx.snap b/src/common/components/introduction/__snapshots__/index.spec.tsx.snap
@@ -45,7 +45,7 @@ exports[`Introduction component (1) renders successfully with minimal props 1`]
         className="col-span-12 md:col-span-5 p-0 md:px-3"
       >
         <div
-          className="text-4xl mb-2 md:mb-4 text-dark font-bold"
+          className="text-4xl mb-2 md:mb-4 text-dark-default font-bold"
         >
           Test Title
         </div>

diff --git a/src/common/components/introduction/index.tsx b/src/common/components/introduction/index.tsx
@@ -50,7 +50,7 @@ export const Introduction = ({
               <img width="100%" src={media} className="media-intro" id="media" />
             </div>
             <div className="col-span-12 md:col-span-5 p-0 md:px-3">
-              <div className="text-4xl mb-2 md:mb-4 text-dark font-bold">{title}</div>
+              <div className="text-4xl mb-2 md:mb-4 text-dark-default font-bold">{title}</div>
               <p className="text-gray-600 paragraph mt-2 md:mt-0" id="description">
                 {description}
               </p>

diff --git a/src/common/components/navbar/navbar-default.tsx b/src/common/components/navbar/navbar-default.tsx
@@ -89,7 +89,7 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
             </Link>
           )}
           <div onClick={() => !showMobileSearch && setShowMobileSearch(true)}>
-            <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark">
+            <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
               {showMobileSearch ? (
                 <>
                   <Search containerClassName="w-full" history={history} />
@@ -112,7 +112,7 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
           {!activeUser && (
             <>
               <div
-                className="p-2 pl-3 w-full mb-2 flex items-center text-dark"
+                className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
                 onClick={() => {
                   toggleUIProp("login");
                   setSmVisible(false);
@@ -122,7 +122,7 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
                 <div className="ml-3 text-15">{_t("g.login")}</div>
               </div>
               <Link to="/signup" onClick={() => !showMobileSearch && setSmVisible(false)}>
-                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark">
+                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
                   <div className="navbar-icon">{keySvg}</div>
                   <div className="ml-3 text-15">{_t("g.signup")}</div>
                 </div>
@@ -133,7 +133,7 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
           <div>
             {activeUser && (
               <div
-                className="p-2 pl-3 w-full mb-2 flex items-center text-dark"
+                className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
                 onClick={() => setShowProfileMenu(!showProfileMenu)}
               >
                 <div className="navbar-icon">{userOutlineSvg}</div>
@@ -227,26 +227,26 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
           {activeUser && (
             <>
               <div
-                className="p-2 pl-3 w-full mb-2 flex items-center text-dark"
+                className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
                 onClick={() => toggleUIProp("notifications")}
               >
-                <div className="navbar-icon text-dark">{notificationSvg}</div>
+                <div className="navbar-icon text-dark-default">{notificationSvg}</div>
                 <div className="ml-3 text-15">{_t("user-nav.notifications")}</div>
               </div>
               <div
                 onClick={() => setShowPurchaseDialog(true)}
-                className="p-2 pl-3 w-full mb-2 flex items-center text-dark"
+                className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
               >
-                <div className="navbar-icon text-dark">{rocketSvg}</div>
+                <div className="navbar-icon text-dark-default">{rocketSvg}</div>
                 <div className="ml-3 text-15">{_t("user-nav.boost")}</div>
               </div>
               <Link
                 className="text-dark-default dark:text-white"
                 to={`/@${activeUser?.username}/wallet`}
                 onClick={() => setSmVisible(false)}
               >
-                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark">
-                  <div className="icon-stroke text-dark">{walletSvg}</div>
+                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
+                  <div className="icon-stroke text-dark-default">{walletSvg}</div>
                   <div className="ml-3 text-15 flex">
                     {_t("user-nav.wallet")}
                     <div className="dot align-self-start ml-1" />
@@ -258,8 +258,10 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
                 to="/submit"
                 onClick={() => setSmVisible(false)}
               >
-                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark">
-                  <div className="icon-stroke text-dark [&>svg]:w-[20px]">{pencilOutlineSvg}</div>
+                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
+                  <div className="icon-stroke text-dark-default [&>svg]:w-[20px]">
+                    {pencilOutlineSvg}
+                  </div>
                   <div className="ml-3 text-15 flex">
                     {_t("user-nav.submit")}
                     <div className="dot align-self-start ml-1" />
@@ -269,12 +271,15 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
             </>
           )}
 
-          <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark relative">
+          <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default relative">
             <div className="navbar-icon">{globeSvg}</div>
             <SwitchLang label={_t("community-settings.lang")} history={history} />
           </div>
 
-          <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark" onClick={changeTheme}>
+          <div
+            className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
+            onClick={changeTheme}
+          >
             <div className="navbar-icon">{global.theme == Theme.day ? moonSvg : sunSvg}</div>
             <div className="ml-3 text-15">
               {_t("user-nav.switch-to")}{" "}

diff --git a/src/common/util/use-global-loader.ts b/src/common/util/use-global-loader.ts
@@ -0,0 +1,10 @@
+export function useGlobalLoader() {
+  return {
+    show: () =>
+      document
+        .querySelector(".ecency-global-loader")
+        ?.classList.remove("ecency-global-loader-hidden"),
+    hide: () =>
+      document.querySelector(".ecency-global-loader")?.classList.add("ecency-global-loader-hidden")
+  };
+}
diff --git a/src/server/template.tsx b/src/server/template.tsx
@@ -56,9 +56,92 @@ export const render = (req: express.Request, state: AppState) => {
                 ${headHelmet}
                 ${linkTags}
                 ${styleTags}
+                <style>
+                  *::before, *::after {
+                    box-sizing: border-box;
+                  }
+                  
+                  .ecency-global-loader {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    height: 100%;
+                    width: 100%;
+                    z-index: 100;
+                    position: fixed;
+                    background-color: #fff;
+                    top: 0;
+                    left: 0;
+                    transition: 0.4s;
+                  }
+                  
+                  .dark .ecency-global-loader {
+                    background: #161d26;
+                  }
+                  
+                  .ecency-global-loader.ecency-global-loader-hidden {
+                    opacity: 0;
+                    visibility: hidden;
+                    transform: scale(2);
+                  }
+                  
+                  .ecency-global-loader-spinner {
+                     position: relative;
+                     height: 112px;
+                     width: 112px;
+                  }
+                  
+                  .ecency-global-loader-spinner:before,
+                  .ecency-global-loader-spinner:after {
+                     border-radius: 50%;
+                     content: '';
+                     position: absolute;
+                  }
+                  
+                  .ecency-global-loader-spinner:before {
+                     background: #474bff;
+                     height: 22.4px;
+                     width: 22.4px;
+                     top: 50%;
+                     left: 50%;
+                     transform: translate(-50%, -50%);
+                  }
+                  
+                  .ecency-global-loader-spinner:after {
+                     animation: pulse-t3pv1p 1.5s infinite;
+                     border: 11.2px solid #474bff;
+                     height: 100%;
+                     width: 100%;
+                  }
+                  
+                  @keyframes pulse-t3pv1p {
+                     from {
+                        opacity: 1;
+                        transform: scale(0);
+                     }
+                  
+                     to {
+                        opacity: 0;
+                        transform: scale(1);
+                     }
+                  }
+                 
+                  .ecency-global-loader-title {
+                    font-family: -apple-system, Helvetica, "Segoe UI", sans-serif;
+                    font-weight: bold;
+                    text-transform: uppercase;
+                    letter-spacing: 0.5rem;
+                    color: #404f66;
+                  }
+                </style>
             </head>
             <body class="${state.global.theme === "night" ? "dark" : ""}">
                 <div id="root">${markup}</div>
+                <div class="ecency-global-loader">
+                  <div class="ecency-global-loader-spinner"></div>
+                  <div class="ecency-global-loader-title">Ecency</div>
+                </div>
                 <script>
                   window.__PRELOADED_STATE__ = ${serialize(finalState)}
                   window.__REACT_QUERY_STATE__ = ${serialize(dehydratedState)}