enhance the loader

ohcnetwork · Dec 19, 2023 · 91fafa8 · 91fafa8
1 parent 1e84f3c
commit 91fafa8
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 54 deletions.
diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
@@ -73,6 +73,11 @@ interface WhenEmptyProps {
   children: JSX.Element | JSX.Element[];
 }
 
+interface DisplayProps {
+  className?: string;
+  children: JSX.Element | JSX.Element[];
+}
+
 const WhenEmpty = <TItem extends object>(props: WhenEmptyProps) => {
   const { items, loading } = useContextualized<TItem>();
 
@@ -97,6 +102,18 @@ const WhenLoading = <TItem extends object>(props: WhenEmptyProps) => {
 
 PaginatedList.WhenLoading = WhenLoading;
 
+const Display = <TItem extends object>(props: DisplayProps) => {
+  const { loading } = useContextualized<TItem>();
+
+  if (loading) {
+    return null;
+  }
+
+  return <div className={props.className}>{props.children}</div>;
+};
+
+PaginatedList.Display = Display;
+
 const Refresh = ({ label = "Refresh", ...props }: CommonButtonProps) => {
   const { loading, refetch } = useContextualized<object>();
 

diff --git a/src/Components/Facility/Consultations/DailyRoundsList.tsx b/src/Components/Facility/Consultations/DailyRoundsList.tsx
@@ -46,79 +46,77 @@ export default function DailyRoundsList({ consultation }: Props) {
                 </span>
               </PaginatedList.WhenEmpty>
               <PaginatedList.WhenLoading>
-                <>
-                  {Array.from({ length: 3 }).map((_, i) => (
-                    <LoadingLogUpdateCard key={i} />
-                  ))}
-                </>
+                <LoadingLogUpdateCard />
               </PaginatedList.WhenLoading>
-              <Timeline
-                className="rounded-lg bg-white p-2 shadow"
-                name="log update"
-              >
-                <PaginatedList.Items<DailyRoundsModel> className="flex grow flex-col gap-3">
-                  {(item, items) => {
-                    if (item.rounds_type === "AUTOMATED") {
+              <PaginatedList.Display>
+                <Timeline
+                  className="rounded-lg bg-white p-2 shadow"
+                  name="log update"
+                >
+                  <PaginatedList.Items<DailyRoundsModel> className="flex grow flex-col gap-3">
+                    {(item, items) => {
+                      if (item.rounds_type === "AUTOMATED") {
+                        return (
+                          <TimelineNode
+                            event={{
+                              type: "created",
+                              timestamp: item.taken_at?.toString() ?? "",
+                              by: {
+                                user_type: "",
+                                first_name: "Virtual",
+                                last_name: "Assistant",
+                                username: "",
+                                id: "",
+                                email: "",
+                                last_login: "",
+                              },
+                              icon: "l-robot",
+                            }}
+                            isLast={items.indexOf(item) == items.length - 1}
+                          >
+                            <VirtualNursingAssistantLogUpdateCard
+                              round={item}
+                              previousRound={items[items.indexOf(item) + 1]}
+                            />
+                          </TimelineNode>
+                        );
+                      }
+
+                      const itemUrl =
+                        item.rounds_type === "NORMAL"
+                          ? `${consultationUrl}/daily-rounds/${item.id}`
+                          : `${consultationUrl}/daily_rounds/${item.id}`;
+
                       return (
                         <TimelineNode
                           event={{
                             type: "created",
                             timestamp: item.taken_at?.toString() ?? "",
                             by: {
-                              user_type: "",
-                              first_name: "Virtual",
-                              last_name: "Assistant",
+                              user_type: item.created_by?.user_type ?? "",
+                              first_name: item.created_by?.first_name ?? "",
+                              last_name: item.created_by?.last_name ?? "",
                               username: "",
                               id: "",
                               email: "",
                               last_login: "",
                             },
-                            icon: "l-robot",
+                            icon: "l-user-nurse",
                           }}
                           isLast={items.indexOf(item) == items.length - 1}
                         >
-                          <VirtualNursingAssistantLogUpdateCard
+                          <DefaultLogUpdateCard
                             round={item}
-                            previousRound={items[items.indexOf(item) + 1]}
+                            consultationData={consultation}
+                            onViewDetails={() => navigate(itemUrl)}
+                            onUpdateLog={() => navigate(`${itemUrl}/update`)}
                           />
                         </TimelineNode>
                       );
-                    }
-
-                    const itemUrl =
-                      item.rounds_type === "NORMAL"
-                        ? `${consultationUrl}/daily-rounds/${item.id}`
-                        : `${consultationUrl}/daily_rounds/${item.id}`;
-
-                    return (
-                      <TimelineNode
-                        event={{
-                          type: "created",
-                          timestamp: item.taken_at?.toString() ?? "",
-                          by: {
-                            user_type: item.created_by?.user_type ?? "",
-                            first_name: item.created_by?.first_name ?? "",
-                            last_name: item.created_by?.last_name ?? "",
-                            username: "",
-                            id: "",
-                            email: "",
-                            last_login: "",
-                          },
-                          icon: "l-user-nurse",
-                        }}
-                        isLast={items.indexOf(item) == items.length - 1}
-                      >
-                        <DefaultLogUpdateCard
-                          round={item}
-                          consultationData={consultation}
-                          onViewDetails={() => navigate(itemUrl)}
-                          onUpdateLog={() => navigate(`${itemUrl}/update`)}
-                        />
-                      </TimelineNode>
-                    );
-                  }}
-                </PaginatedList.Items>
-              </Timeline>
+                    }}
+                  </PaginatedList.Items>
+                </Timeline>
+              </PaginatedList.Display>
               <div className="flex w-full items-center justify-center">
                 <PaginatedList.Paginator hideIfSinglePage />
               </div>