feat: add loading spinner for pages categories, offer list and offer

SocialGouv · Jan 26, 2024 · b0c0e2e · b0c0e2e
1 parent 53804c1
commit b0c0e2e
Show file tree

Hide file tree

Showing 4 changed files with 298 additions and 230 deletions.
diff --git a/webapp/src/components/LoadingLoader.tsx b/webapp/src/components/LoadingLoader.tsx
@@ -0,0 +1,13 @@
+import { Spinner } from "@chakra-ui/react";
+
+export default function LoadingLoader() {
+  return (
+    <Spinner
+      thickness="4px"
+      speed="0.65s"
+      emptyColor="gray.200"
+      color="blue.400"
+      size="xl"
+    />
+  );
+}
diff --git a/webapp/src/pages/dashboard/categories.tsx b/webapp/src/pages/dashboard/categories.tsx
@@ -1,18 +1,28 @@
-import { Box, Button, Flex, Heading, SimpleGrid, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Center,
+  Flex,
+  Heading,
+  SimpleGrid,
+  Text,
+} from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { api } from "~/utils/api";
 import { ArrowBackIcon } from "@chakra-ui/icons";
 import { useRouter } from "next/router";
+import LoadingLoader from "~/components/LoadingLoader";
 
 export default function Dashboard() {
   const router = useRouter();
 
-  const { data: resultCategories } = api.category.getList.useQuery({
-    page: 1,
-    perPage: 50,
-    sort: "createdAt",
-  });
+  const { data: resultCategories, isLoading: isLoadingCategories } =
+    api.category.getList.useQuery({
+      page: 1,
+      perPage: 50,
+      sort: "createdAt",
+    });
 
   const { data: categories } = resultCategories || {};
 
@@ -32,9 +42,10 @@ export default function Dashboard() {
         </Heading>
       </Flex>
       <SimpleGrid
-        columns={2}
+        columns={isLoadingCategories || !categories ? 1 : 2}
         spacing={4}
         alignItems="center"
+        h="full"
         mt={8}
         pb={12}
         overflowY="auto"
@@ -44,29 +55,38 @@ export default function Dashboard() {
           },
         }}
       >
-        {categories?.map((category) => (
-          <Link key={category.id} href={`/dashboard/category/${category.slug}`}>
-            <Flex
-              flexDir="column"
-              borderRadius="xl"
-              justifyContent="center"
-              alignItems="center"
-              textAlign="center"
-              bgColor="white"
-              h="120px"
+        {isLoadingCategories || !categories ? (
+          <Center w="full" h="full">
+            <LoadingLoader />
+          </Center>
+        ) : (
+          categories.map((category) => (
+            <Link
+              key={category.id}
+              href={`/dashboard/category/${category.slug}`}
             >
-              <Image
-                src={category.icon.url as string}
-                alt={category.icon.alt as string}
-                width={58}
-                height={58}
-              />
-              <Text fontWeight="medium" fontSize="sm" mt={1.5}>
-                {category.label}
-              </Text>
-            </Flex>
-          </Link>
-        ))}
+              <Flex
+                flexDir="column"
+                borderRadius="xl"
+                justifyContent="center"
+                alignItems="center"
+                textAlign="center"
+                bgColor="white"
+                h="120px"
+              >
+                <Image
+                  src={category.icon.url as string}
+                  alt={category.icon.alt as string}
+                  width={58}
+                  height={58}
+                />
+                <Text fontWeight="medium" fontSize="sm" mt={1.5}>
+                  {category.label}
+                </Text>
+              </Flex>
+            </Link>
+          ))
+        )}
       </SimpleGrid>
     </Flex>
   );

diff --git a/webapp/src/pages/dashboard/category/[slug].tsx b/webapp/src/pages/dashboard/category/[slug].tsx
@@ -1,11 +1,12 @@
-import { Box, Button, Flex, Heading, SimpleGrid, Text } from "@chakra-ui/react";
+import { Box, Button, Center, Flex, Heading, Text } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { api } from "~/utils/api";
 import { ChevronLeftIcon } from "@chakra-ui/icons";
 import { useRouter } from "next/router";
 import { OfferKindBadge } from "~/components/OfferKindBadge";
 import { dottedPattern } from "~/utils/chakra-theme";
+import LoadingLoader from "~/components/LoadingLoader";
 
 export default function Dashboard() {
   const router = useRouter();
@@ -20,15 +21,16 @@ export default function Dashboard() {
 
   const { data: category } = resultCategory || {};
 
-  const { data: resultOffers } = api.offer.getList.useQuery(
-    {
-      page: 1,
-      perPage: 50,
-      sort: "createdAt",
-      categoryId: category?.id,
-    },
-    { enabled: category?.id !== undefined }
-  );
+  const { data: resultOffers, isLoading: isLoadingOffers } =
+    api.offer.getList.useQuery(
+      {
+        page: 1,
+        perPage: 50,
+        sort: "createdAt",
+        categoryId: category?.id,
+      },
+      { enabled: category?.id !== undefined }
+    );
 
   const { data: offers } = resultOffers || {};
 
@@ -67,6 +69,7 @@ export default function Dashboard() {
         flexDir="column"
         gap={6}
         mt={8}
+        h="full"
         overflowY="auto"
         pb={12}
         sx={{
@@ -75,58 +78,70 @@ export default function Dashboard() {
           },
         }}
       >
-        {offers
-          ?.filter((offer) => offer.kind === "code")
-          ?.map((offer) => (
-            <Link
-              key={offer.id}
-              href={`/dashboard/offer/${
-                offer.kind === "code" ? "online" : "in-store"
-              }/${offer.id}`}
-            >
-              <Flex flexDir="column">
-                <Flex
-                  bgColor={offer.partner.color}
-                  py={5}
-                  borderTopRadius={12}
-                  position="relative"
-                  justifyContent="center"
-                  alignItems="center"
-                  sx={{ ...dottedPattern("#ffffff") }}
-                >
+        {isLoadingOffers || !offers ? (
+          <Center w="full" h="full">
+            <LoadingLoader />
+          </Center>
+        ) : (
+          offers
+            ?.filter((offer) => offer.kind === "code")
+            ?.map((offer) => (
+              <Link
+                key={offer.id}
+                onClick={() =>
+                  localStorage.setItem(
+                    "cje-current-partner-color",
+                    offer.partner.color
+                  )
+                }
+                href={`/dashboard/offer/${
+                  offer.kind === "code" ? "online" : "in-store"
+                }/${offer.id}`}
+              >
+                <Flex flexDir="column">
                   <Flex
+                    bgColor={offer.partner.color}
+                    py={5}
+                    borderTopRadius={12}
+                    position="relative"
+                    justifyContent="center"
                     alignItems="center"
-                    borderRadius="full"
-                    p={1}
+                    sx={{ ...dottedPattern("#ffffff") }}
+                  >
+                    <Flex
+                      alignItems="center"
+                      borderRadius="full"
+                      p={1}
+                      bgColor="white"
+                    >
+                      <Image
+                        src={offer.partner.icon.url ?? ""}
+                        alt={offer.partner.icon.alt ?? ""}
+                        width={32}
+                        height={32}
+                      />
+                    </Flex>
+                  </Flex>
+                  <Flex
+                    flexDir="column"
+                    p={3}
                     bgColor="white"
+                    borderBottomRadius={8}
+                    gap={2}
+                    boxShadow="md"
                   >
-                    <Image
-                      src={offer.partner.icon.url ?? ""}
-                      alt={offer.partner.icon.alt ?? ""}
-                      width={32}
-                      height={32}
-                    />
+                    <Text fontSize="sm" fontWeight="medium">
+                      {offer.partner.name}
+                    </Text>
+                    <Text fontWeight="bold" fontSize="sm" noOfLines={2}>
+                      {offer.title}
+                    </Text>
+                    <OfferKindBadge kind={offer.kind} variant="light" />
                   </Flex>
                 </Flex>
-                <Flex
-                  flexDir="column"
-                  p={3}
-                  bgColor="white"
-                  borderBottomRadius={8}
-                  gap={2}
-                  boxShadow="md"
-                >
-                  <Text fontSize="sm" fontWeight="medium">
-                    {offer.partner.name}
-                  </Text>
-                  <Text fontWeight="bold" fontSize="sm" noOfLines={2}>
-                    {offer.title}
-                  </Text>
-                  <OfferKindBadge kind={offer.kind} variant="light" />
-                </Flex>
-              </Flex>
-            </Link>
-          ))}
+              </Link>
+            ))
+        )}
       </Flex>
     </Flex>
   );