From 82dde1c99b91edc4bbe534e6e02286543d284019 Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Wed, 24 Jan 2024 18:32:31 -0500
Subject: [PATCH] fix: add skeleton loader for insights panel

---
 .../shared/AppSidebar/InsightsPanel.tsx       | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/components/shared/AppSidebar/InsightsPanel.tsx b/components/shared/AppSidebar/InsightsPanel.tsx
index e6c4990d49..bb9f8fc8b5 100644
--- a/components/shared/AppSidebar/InsightsPanel.tsx
+++ b/components/shared/AppSidebar/InsightsPanel.tsx
@@ -3,6 +3,7 @@ import { FiChevronDown, FiChevronUp } from "react-icons/fi";
 import { Root, Thumb } from "@radix-ui/react-switch";
 import { useState } from "react";
 import ClientOnly from "components/atoms/ClientOnly/client-only";
+import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
 import SidebarMenuItem from "./sidebar-menu-item";
 
 interface InsightsPanelProps {
@@ -13,6 +14,20 @@ interface InsightsPanelProps {
   isLoading: boolean;
 }
 
+const Loading = () => {
+  return (
+    <ul className="list-none w-full px-2 mt-1 [&_li]:border-l-2">
+      {new Array(5).fill(0).map((_, i) => {
+        return (
+          <li key={i} className="p-2">
+            <SkeletonWrapper height={20} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
 export const InsightsPanel = ({ title, username, insights, type, isLoading }: InsightsPanelProps) => {
   const [open, setOpen] = useState(true);
   return (
@@ -41,7 +56,9 @@ export const InsightsPanel = ({ title, username, insights, type, isLoading }: In
         </Root>
       </Collapsible.Trigger>
       <Collapsible.Content>
-        {isLoading ? null : (
+        {isLoading ? (
+          <Loading />
+        ) : (
           <ul className="list-none w-full px-2 mt-1 [&_li]:border-l-2">
             {insights.map((insight) => {
               const url = type === "list" ? `/lists/${insight.id}` : `/pages/${username}/${insight.id}/dashboard`;