From 8055685822e89a81333e6be1b1082062633a65e2 Mon Sep 17 00:00:00 2001
From: dcordz <17937472+dcordz@users.noreply.github.com>
Date: Wed, 12 Jun 2024 10:33:29 -0400
Subject: [PATCH] fade-in - fade in child component rendered by Layout, don't
 render loading bar in menu, add scss for striped loading text

---
 app/assets/stylesheets/scss/striped.scss      | 39 ++++++++++++++++++
 app/frontend/components/Layout.tsx            | 41 +++----------------
 .../components/dialogs/InviteDialog.tsx       |  2 -
 .../components/dialogs/InviteIconDialog.tsx   | 10 +++--
 .../components/user/LocaleSelector.tsx        | 14 ++++---
 app/frontend/hooks/useLocales.ts              |  6 +--
 app/frontend/pages/BillOfTheWeek.tsx          |  3 --
 7 files changed, 62 insertions(+), 53 deletions(-)
 create mode 100644 app/assets/stylesheets/scss/striped.scss

diff --git a/app/assets/stylesheets/scss/striped.scss b/app/assets/stylesheets/scss/striped.scss
new file mode 100644
index 00000000..3555968e
--- /dev/null
+++ b/app/assets/stylesheets/scss/striped.scss
@@ -0,0 +1,39 @@
+// https://lea.verou.me/demos/css3-patterns.html
+// https://stackoverflow.com/questions/14072142/striped-text-in-css
+
+@import "./_constants.scss";
+
+$primary: map-get($sway-theme-colors, "primary");
+
+.stripes {
+    height: 250px;
+    width: 375px;
+    float: left;
+    margin: 10px;
+    -webkit-background-size: 50px 50px;
+    -moz-background-size: 50px 50px;
+    background-size: 50px 50px;
+    -moz-box-shadow: 1px 1px 8px gray;
+    -webkit-box-shadow: 1px 1px 8px gray;
+    box-shadow: 1px 1px 8px gray;
+    
+    .horizontal {
+        background-image: -webkit-gradient(
+            linear,
+            0 0,
+            0 100%,
+            color-stop(0.5, rgba(255, 255, 255, 0.2)),
+            color-stop(0.5, transparent),
+            to(transparent)
+        );
+        background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
+        background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
+        background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
+        background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
+        background-image: linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
+    }
+
+    .loading {
+        background-color: $primary;
+    }
+}
diff --git a/app/frontend/components/Layout.tsx b/app/frontend/components/Layout.tsx
index 35fe015e..af74fd31 100644
--- a/app/frontend/components/Layout.tsx
+++ b/app/frontend/components/Layout.tsx
@@ -6,6 +6,7 @@ import React, { PropsWithChildren } from "react";
 // Load react-select
 // @ts-expect-error - unused Select, importing here to have styles available
 import Select from "react-select"; // eslint-disable-line
+import { Animate } from "react-simple-animate";
 
 interface IProps extends PropsWithChildren {
     [key: string]: any;
@@ -13,43 +14,13 @@ interface IProps extends PropsWithChildren {
 
 const _Layout: React.FC<IProps> = ({ children, ...props }) => (
     <AppDrawer>
-        {React.Children.map(children, (child) =>
-            React.isValidElement(child) ? React.cloneElement(child, { ...child?.props, ...props }) : child,
-        )}
+        {React.Children.map(children, (child) => (
+            <Animate play={true} start={{ opacity: 0 }} end={{ opacity: 1 }}>
+                {React.isValidElement(child) ? React.cloneElement(child, { ...child?.props, ...props }) : child}
+            </Animate>
+        ))}
 
         <Footer />
-
-        {/* <div className="min-h-full">
-            <nav className="bg-white shadow-sm">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="flex justify-between h-16">
-                        <div className="flex">
-                            <div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
-                                <InertiaLink
-                                    href="/"
-                                    className="border-transparent text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
-                                    aria-current="page"
-                                >
-                                    Home
-                                </InertiaLink>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </nav>
-
-            <div className="py-10">
-                <main>
-                    <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                        <div className="px-4 py-8 sm:px-0">
-                            <div className="bg-white rounded-lg h-96 p-3">
-                                {children}
-                            </div>
-                        </div>
-                    </div>
-                </main>
-            </div>
-        </div> */}
     </AppDrawer>
 );
 
diff --git a/app/frontend/components/dialogs/InviteDialog.tsx b/app/frontend/components/dialogs/InviteDialog.tsx
index 975dd147..780bba85 100644
--- a/app/frontend/components/dialogs/InviteDialog.tsx
+++ b/app/frontend/components/dialogs/InviteDialog.tsx
@@ -18,7 +18,6 @@ const InviteDialog: React.FC<IProps> = ({ open, handleClose }) => {
 
     return (
         <Modal
-            centered
             show={open}
             onHide={handleClose}
             aria-labelledby="alert-dialog-title"
@@ -28,7 +27,6 @@ const InviteDialog: React.FC<IProps> = ({ open, handleClose }) => {
             <Modal.Header>
                 <Modal.Title id="alert-dialog-title">Invite friends using email or a link.</Modal.Title>
             </Modal.Header>
-
             <Modal.Body className="pointer">
                 <InviteBody />
             </Modal.Body>
diff --git a/app/frontend/components/dialogs/InviteIconDialog.tsx b/app/frontend/components/dialogs/InviteIconDialog.tsx
index 3a18483f..fd2c261e 100644
--- a/app/frontend/components/dialogs/InviteIconDialog.tsx
+++ b/app/frontend/components/dialogs/InviteIconDialog.tsx
@@ -1,5 +1,5 @@
 import { Suspense, lazy, useCallback, useState } from "react";
-import { Dropdown, ProgressBar } from "react-bootstrap";
+import { Dropdown } from "react-bootstrap";
 import { FiUserPlus } from "react-icons/fi";
 const InviteDialog = lazy(() => import("./InviteDialog"));
 
@@ -19,9 +19,11 @@ const InviteIconDialog = ({ withText }: { withText?: boolean; iconStyle?: React.
             </span>
             <span className="col-10">{withText && <span>Invite Friends</span>}</span>
             <span className="col-1">
-                <Suspense fallback={<ProgressBar animated now={100} />}>
-                    <InviteDialog open={open} handleClose={handleClose} />
-                </Suspense>
+                {open && (
+                    <Suspense fallback={null}>
+                        <InviteDialog open={open} handleClose={handleClose} />
+                    </Suspense>
+                )}
             </span>
         </Dropdown.Item>
     );
diff --git a/app/frontend/components/user/LocaleSelector.tsx b/app/frontend/components/user/LocaleSelector.tsx
index 68f66744..19125f8e 100644
--- a/app/frontend/components/user/LocaleSelector.tsx
+++ b/app/frontend/components/user/LocaleSelector.tsx
@@ -17,7 +17,7 @@ const toSelectOption = (l: sway.ISwayLocale): ISelectOption => ({ label: toForma
 
 const LocaleSelector: React.FC<IProps> = ({ callback }) => {
     const { options, isLoading: isLoadingLocales } = useLocales();
-    const [locale, getLocale] = useLocale();
+    const [locale, getLocale, isLoadingLocale] = useLocale();
 
     const selected = useMemo(() => {
         if (locale) {
@@ -48,13 +48,15 @@ const LocaleSelector: React.FC<IProps> = ({ callback }) => {
                         value={selected}
                         onChange={handleChange}
                         styles={REACT_SELECT_STYLES}
+                        isDisabled={isLoadingLocales || isLoadingLocale}
                     />
                 </div>
-                {isLoadingLocales && (
-                    <div className="col-1">
-                        <SwaySpinner isHidden={false} />
-                    </div>
-                )}
+                {isLoadingLocale ||
+                    (isLoadingLocales && (
+                        <div className="col-1">
+                            <SwaySpinner isHidden={false} />
+                        </div>
+                    ))}
             </div>
         </Animate>
     );
diff --git a/app/frontend/hooks/useLocales.ts b/app/frontend/hooks/useLocales.ts
index 4251bfe1..a7c0ee9e 100644
--- a/app/frontend/hooks/useLocales.ts
+++ b/app/frontend/hooks/useLocales.ts
@@ -48,14 +48,14 @@ export const useLocales = () => {
     return { locales, options, isLoading };
 };
 
-export const useLocale = (): [sway.ISwayLocale, (id?: number) => Promise<void>] => {
+export const useLocale = (): [sway.ISwayLocale, (id?: number) => Promise<void>, boolean] => {
     const dispatch = useDispatch();
 
     const params = new URLSearchParams(window.location.search) as {
         localeName?: string;
     };
 
-    const { get } = useAxiosGet<sway.ISwayLocale>("/sway_locales", {
+    const { get, isLoading } = useAxiosGet<sway.ISwayLocale>("/sway_locales", {
         skipInitialRequest: true,
     });
 
@@ -77,5 +77,5 @@ export const useLocale = (): [sway.ISwayLocale, (id?: number) => Promise<void>]
         [dispatch, get, params?.localeName],
     );
 
-    return [useSelector(localeSelector), getter];
+    return [useSelector(localeSelector), getter, isLoading];
 };
diff --git a/app/frontend/pages/BillOfTheWeek.tsx b/app/frontend/pages/BillOfTheWeek.tsx
index 3868521c..179f295b 100644
--- a/app/frontend/pages/BillOfTheWeek.tsx
+++ b/app/frontend/pages/BillOfTheWeek.tsx
@@ -2,7 +2,6 @@
 
 import { router } from "@inertiajs/react";
 import BillComponent from "app/frontend/components/bill/BillComponent";
-import { logDev } from "app/frontend/sway_utils";
 import { sway } from "sway";
 import LocaleSelector from "../components/user/LocaleSelector";
 
@@ -16,8 +15,6 @@ interface IProps {
 }
 
 const _BillOfTheWeek: React.FC<IProps> = (props) => {
-    logDev("BILL OF THE WEEK PROPS", props);
-
     return (
         <div className="col pb-5">
             <div className="row">