[feat] Refinements to UX for fetching data from Notion

src/components/ListComponent.css

@@ -1,14 +1,13 @@
-
 .list {
-    border-radius: 20px; 
-    padding: 0 0 0 0;
-    
+  border-radius: 20px;
+  padding: 0 0 0 0;
 }
 
 .ListItemText {
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  width: 100%;
 }
 
 ion-list-header {
-    /* color: "primary"; */
+  /* color: "primary"; */
 }

src/components/ListComponent.tsx

@@ -1,9 +1,34 @@
 import { IonContent, IonItem, IonLabel, IonListHeader } from "@ionic/react";
 import "../components/ListComponent.css";
+import SkeletonText from "./SkeletonText";
 
-const ListComponent: React.FC<{ title?: string; laws: string[] }> = (props) => {
+/**
+ * This component creates a shimmering "skeleton" version of the list component.
+ * It shows only when content isn't available yet (loading).
+ */
+function ListComponentSkeleton({ items = 5 }: { items?: number }) {
+  return (
+    <>
+      {Array(items)
+        .fill(0)
+        .map((_, i) => (
+          <IonItem key={i}>
+            <SkeletonText />
+          </IonItem>
+        ))}
+    </>
+  );
+}
+
+const ListComponent: React.FC<{
+  title?: string;
+  laws: string[];
+  loading?: boolean;
+}> = (props) => {
   const title = props.title;
   const laws = props.laws;
+  const loading = props.loading ?? false;
+
   return (
     <IonContent>
       {title ? (
@@ -12,16 +37,19 @@ const ListComponent: React.FC<{ title?: string; laws: string[] }> = (props) => {
         </IonListHeader>
       ) : null}
 
-      {laws.map((lawName: string) => {
-        return (
-          <IonItem
-            key={lawName}
-            routerLink={`/article/${encodeURIComponent(lawName)}`}
-          >
-            <p className="ListItemText">{lawName}</p>
-          </IonItem>
-        );
-      })}
+      {loading && <ListComponentSkeleton />}
+
+      {!loading &&
+        laws.map((lawName: string) => {
+          return (
+            <IonItem
+              key={lawName}
+              routerLink={`/article/${encodeURIComponent(lawName)}`}
+            >
+              <p className="ListItemText">{lawName}</p>
+            </IonItem>
+          );
+        })}
     </IonContent>
   );
 };

src/components/SkeletonText.tsx

@@ -0,0 +1,12 @@
+import { IonSkeletonText } from "@ionic/react";
+import React from "react";
+
+function skeletonRange() {
+  return Math.floor(Math.random() * (75 - 25 + 1)) + 25;
+}
+
+export default function SkeletonText() {
+  return (
+    <IonSkeletonText animated={true} style={{ width: `${skeletonRange()}%` }} />
+  );
+}

src/pages/LawListPage.tsx

@@ -8,15 +8,10 @@ import {
   IonToolbar,
 } from "@ionic/react";
 import { alertCircleOutline } from "ionicons/icons";
-import { useEffect } from "react";
 import useSWR from "swr";
 import ListComponent from "../components/ListComponent";
 import { fetcher } from "../lib/api";
-
-interface Topic {
-  blockId: string;
-  name: string;
-}
+import { Topic } from "../types";
 
 const LawListPage: React.FC = () => {
   const { data, error } = useSWR<Topic[]>(
@@ -38,12 +33,11 @@ const LawListPage: React.FC = () => {
             <IonTitle size="large">Leyes</IonTitle>
           </IonToolbar>
         </IonHeader>
-        {data && <ListComponent laws={data.map((item) => item.name)} />}
-        <IonLoading
-          isOpen={isLoading}
-          duration={isLoading ? 50 : undefined}
-          message="Loading..."
+        <ListComponent
+          loading={isLoading}
+          laws={data ? data.map((item) => item.name) : []}
         />
+
         <IonToast
           icon={alertCircleOutline}
           color="danger"

src/types.ts

@@ -0,0 +1,8 @@
+export interface Topic {
+  blockId: string;
+  name: string;
+}
+
+export interface Error {
+  status: string;
+}