Merge pull request #51 from openrice-canada/feat/skeleton

feat: update skeleton ui in restaurants home page and restaurant overview page

src/components/layout/Header.tsx

@@ -7,9 +7,9 @@ import {
   IoPersonAddOutline,
 } from "react-icons/io5";
 import { useDispatch, useSelector } from "react-redux";
-import { AppDispatch, IRootState } from "../../store";
-import { getCurrentUserThunk } from "../../redux/auth/authSlice";
 import { enqueueSnackbar } from "notistack";
+import { getCurrentUserThunk } from "../../redux/auth/authSlice";
+import { AppDispatch, IRootState } from "../../store";
 
 const Header = () => {
   const navigate = useNavigate();

src/components/skeletonLoader/RestaurantDetailSkeletonLoader.tsx

@@ -1,19 +1,37 @@
 import ContentLoader from "react-content-loader";
+import RestaurantOverviewButton from "../utils/buttons/RestaurantOverviewButton";
 
-const RestaurantDetailSkeletonLoader: React.FC = () => (
-  <ContentLoader
-    speed={1}
-    width={340}
-    height={164}
-    viewBox="0 0 340 164"
-    backgroundColor="#f3f3f3"
-    foregroundColor="#ecebeb"
-  >
-    <rect x="5" y="1" rx="3" ry="3" width="140" height="21" />
-    <rect x="6" y="100" rx="3" ry="3" width="37" height="20" />
-    <rect x="6" y="59" rx="3" ry="3" width="260" height="36" />
-    <rect x="5" y="28" rx="0" ry="0" width="223" height="23" />
-  </ContentLoader>
-);
+const RestaurantDetailSkeletonLoader: React.FC = () => {
+  const buttons = ["Reviews", "Photos", "Menus"];
+
+  return (
+    <div className="max-w-5xl mx-auto py-3">
+      <ContentLoader
+        speed={1}
+        width={1180}
+        height={280}
+        viewBox="0 0 1180 280"
+        backgroundColor="#f3f3f3"
+        foregroundColor="#ecebeb"
+      >
+        <rect x="16" y="2" rx="6" ry="6" width="395" height="280" />
+        <rect x="444" y="6" rx="1" ry="1" width="227" height="26" />
+        <rect x="444" y="39" rx="1" ry="1" width="197" height="18" />
+        <rect x="444" y="62" rx="1" ry="1" width="82" height="21" />
+        <rect x="444" y="89" rx="1" ry="1" width="480" height="21" />
+      </ContentLoader>
+      <div className="flex justify-center">
+        <div className="flex gap-16">
+          <RestaurantOverviewButton button={"Reviews"} active={true} />
+          {buttons
+            .filter((button) => button !== "Reviews")
+            .map((button, index) => (
+              <RestaurantOverviewButton button={button} key={index} />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default RestaurantDetailSkeletonLoader;

src/components/utils/buttons/RestaurantOverviewButton.tsx

@@ -1,15 +1,23 @@
 const RestaurantOverviewButton: React.FC<{
   button: string;
-  active: boolean;
-  setActive: React.Dispatch<React.SetStateAction<string>>;
+  active?: boolean;
+  setActive?: React.Dispatch<React.SetStateAction<string>>;
 }> = ({ button, active, setActive }) => {
   return (
     <h1
       className={`text-2xl font-bold mt-6 hover:text-orange-600 ${
         active && "text-orange-400"
       }`}
     >
-      <button onClick={() => setActive(button)}>{button}</button>
+      <button
+        onClick={() => {
+          if (setActive) {
+            setActive(button);
+          }
+        }}
+      >
+        {button}
+      </button>
     </h1>
   );
 };

src/pages/restaurant/RestaurantHomePage.tsx

@@ -48,7 +48,7 @@ const RestaurantHomePage = () => {
 
   useEffect(() => {
     if (
-      restaurants.length > 0 &&
+      restaurants.length > 6 &&
       (!searchParams.get("search") || !searchParams.get("dish"))
     ) {
       setLoading(false);
@@ -103,7 +103,7 @@ const RestaurantHomePage = () => {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
           {loading &&
             Array.from({
-              length: 10,
+              length: 15,
             }).map((_, index) => (
               <RestaurantCardSkeletonLoader
                 key={`loader ${index}`}

src/pages/restaurant/RestaurantOverviewPage.tsx

@@ -82,8 +82,10 @@ const RestaurantOverviewPage: React.FC = () => {
     fetchRestaurantReview();
     fetchReviewPhotos();
     fetchMenuPhotos();
-    setLoading(false);
-  }, [id, dispatch]);
+    if (restaurantDetail?.restaurant_id || !id || !isUUID(id)) {
+      setLoading(false);
+    }
+  }, [id, dispatch, restaurantDetail]);
 
   const openPopUp = (image: string, imageID: string) => {
     setSelectedImage({ id: imageID, photo_url: image });
@@ -129,9 +131,9 @@ const RestaurantOverviewPage: React.FC = () => {
   };
   const buttons = ["Reviews", "Photos", "Menus"];
 
-  return !restaurantDetail && loading ? (
+  return loading ? (
     <RestaurantDetailSkeletonLoader />
-  ) : !restaurantDetail && !loading ? (
+  ) : !restaurantDetail ? (
     <ErrorPage />
   ) : (
     restaurantDetail && (

src/redux/restaurant/restaurantSlice.ts

@@ -60,7 +60,11 @@ export const createRestaurantThunk = createAsyncThunk(
 const restaurantSlice = createSlice({
   name: "restaurant",
   initialState,
-  reducers: {},
+  reducers: {
+    resetRestaurant: (state) => {
+      state.restaurant = null;
+    },
+  },
   extraReducers: (builder) => {
     builder.addCase(getRestaurantsByQueryThunk.fulfilled, (state, action) => {
       if (action.payload) {
@@ -82,4 +86,5 @@ const restaurantSlice = createSlice({
   },
 });
 
+export const { resetRestaurant } = restaurantSlice.actions;
 export default restaurantSlice.reducer;