Merge pull request #36 from khanghy2130/minor-changes

Add page loading indicator
khanghy2130 · Oct 17, 2024 · fd04fae · fd04fae
2 parents 4152a98 + 92d2113
commit fd04fae
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 44 deletions.
diff --git a/app/components/PageLoadingIndicator.tsx b/app/components/PageLoadingIndicator.tsx
@@ -0,0 +1,14 @@
+import { useNavigation } from "@remix-run/react";
+import SpinnerSVG from "./SpinnerSVG";
+
+export default function PageLoadingIndicator() {
+    const navigation = useNavigation();
+    if (navigation.state !== "loading") return null;
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <div className="h-20 w-20 text-primaryColor">
+                <SpinnerSVG />
+            </div>
+        </div>
+    );
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -10,9 +10,10 @@ import {
     Scripts,
     useLoaderData,
     useLocation,
+    useNavigation,
     useRevalidator,
 } from "@remix-run/react";
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { createBrowserClient } from "@supabase/ssr";
 
 import stylesheet from "~/tailwind.css";
@@ -30,6 +31,7 @@ import { RawCartItem } from "./utils/types/ContextProps.type";
 import PopupNotificationsList from "./components/PopupNotificationsList";
 import Footer from "./components/Footer";
 import { useNotification } from "./components/useNotification";
+import PageLoadingIndicator from "./components/PageLoadingIndicator";
 
 export const links: LinksFunction = () => [
     { rel: "stylesheet", href: stylesheet },
@@ -200,6 +202,7 @@ function App() {
                 <Links />
             </head>
             <body key={forceRerenderCounter}>
+                <PageLoadingIndicator />
                 <Navbar
                     cartCount={cartCount}
                     setSidePanelIsShown={setSidePanelIsShown}

diff --git a/app/routes/admin/ProductDetails.tsx b/app/routes/admin/ProductDetails.tsx
@@ -249,7 +249,7 @@ export default function ProductDetails({ mode, updateFormState }: Props) {
                 defaultValue={updateFormState.title}
             />
             <textarea
-                className="mb-10 bg-bgColor2 p-2 text-textColor1"
+                className="mb-10 min-h-40 bg-bgColor2 p-2 text-textColor1"
                 required
                 placeholder="Description"
                 name="description"
@@ -332,7 +332,10 @@ export default function ProductDetails({ mode, updateFormState }: Props) {
                         .filter((imageFile) => !imageFile.willBeRemoved)
                         .map((imageFile, i) => (
                             <div className="flex" key={imageFile.listKey}>
-                                <img className="w-80" src={imageFile.url} />
+                                <img
+                                    className="h-40 w-40"
+                                    src={imageFile.url}
+                                />
                                 <button
                                     className="text-red-500 underline"
                                     type="button"

diff --git a/app/routes/profile/orders/MyOrders.tsx b/app/routes/profile/orders/MyOrders.tsx
@@ -60,7 +60,7 @@ export default function MyOrders({ ordersData }: Props) {
                     My orders
                 </span>
             </h1>
-            <div className="flex max-h-96 flex-col overflow-auto text-xl sm:text-2xl">
+            <div className="flex max-h-96 flex-col overflow-auto text-lg sm:text-xl">
                 {orders.length === 0 ? (
                     <p className="w-full text-center text-lg">
                         No orders found.

diff --git a/app/routes/profile/reviews/MyReviews.tsx b/app/routes/profile/reviews/MyReviews.tsx
@@ -42,7 +42,7 @@ export default function MyReviews() {
                         No reviews found.
                     </p>
                 )}
-                <div className="flex w-full flex-wrap">
+                <div className="flex w-full flex-col">
                     {reviews.map((r) => (
                         <ReviewItem review={r} key={r.id} />
                     ))}

diff --git a/app/routes/profile/reviews/ReviewItem.tsx b/app/routes/profile/reviews/ReviewItem.tsx
@@ -43,55 +43,50 @@ export default function ReviewItem({ review }: Props) {
     const imgSrc = `${env.SUPABASE_IMAGES_PATH}/${review.product_id}/${imgName}`;
 
     return (
-        <div className="w-full lg:w-1/2">
-            <div className="my-1 flex h-28 overflow-hidden rounded-md bg-bgColor2 lg:mx-2">
+        <div className="my-3 flex w-full max-w-[600px] flex-col overflow-hidden rounded-md bg-bgColor2 px-2 py-2 text-lg sm:text-xl">
+            <div className="flex items-start">
                 {/* Product image */}
-                <div className="flex max-h-28 min-h-28 min-w-28 max-w-28">
-                    <div className="flex w-full items-center justify-center">
-                        {imgName === null || !imgIsLoaded ? (
+                <div className="flex aspect-square w-20">
+                    {imgName === null || !imgIsLoaded ? (
+                        <div className="flex aspect-square w-full items-center justify-center">
                             <div className="h-1/3 w-1/3 text-primaryColor">
                                 <SpinnerSVG />
                             </div>
-                        ) : null}
-                        {imgName !== null ? (
-                            <img
-                                className={`${imgIsLoaded ? "" : "hidden"} w-full`}
-                                src={imgSrc}
-                                onLoad={() => setImgIsLoaded(true)}
-                            />
-                        ) : null}
-                    </div>
+                        </div>
+                    ) : null}
+                    {imgName !== null ? (
+                        <img
+                            className={`${imgIsLoaded ? "" : "hidden"} w-full rounded-md`}
+                            src={imgSrc}
+                            onLoad={() => setImgIsLoaded(true)}
+                        />
+                    ) : null}
                 </div>
 
-                <div className="flex flex-grow overflow-hidden px-3 py-2">
-                    <div className="flex w-full flex-col items-start overflow-auto">
-                        {/* Product title */}
-                        <Link
-                            to={`/product/${review.product_id}`}
-                            className="cursor-pointer text-lg leading-none underline hover:text-primaryColor sm:text-xl"
-                        >
-                            {review.product?.title}
-                        </Link>
-
-                        {/* Rating */}
-                        <div className="flex items-center py-2">
-                            {[1, 2, 3, 4, 5].map((num) => {
-                                const isEmpty = num > review.rating;
-                                return (
-                                    <div key={num} className="">
-                                        {isEmpty ? emptyStar : filledStar}
-                                    </div>
-                                );
-                            })}
-                        </div>
+                <div className="flex w-full flex-col pl-2">
+                    {/* Product title */}
+                    <Link
+                        to={`/product/${review.product_id}`}
+                        className="cursor-pointer text-lg leading-none underline hover:text-primaryColor sm:text-xl"
+                    >
+                        {review.product?.title}
+                    </Link>
 
-                        {/* Feedback */}
-                        <p className="whitespace-pre-wrap pr-2">
-                            {review.feedback}
-                        </p>
+                    {/* Rating */}
+                    <div className="flex items-center py-2">
+                        {[1, 2, 3, 4, 5].map((num) => {
+                            const isEmpty = num > review.rating;
+                            return (
+                                <div key={num} className="">
+                                    {isEmpty ? emptyStar : filledStar}
+                                </div>
+                            );
+                        })}
                     </div>
                 </div>
             </div>
+            {/* Feedback */}
+            <p className="whitespace-pre-wrap pt-2">{review.feedback}</p>
         </div>
     );
 }