From 5327733823418375345ea7e7e31a900e0633dd4f Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 13 Jun 2024 16:52:15 +0800
Subject: [PATCH] feat: add entry content loading indicator

Signed-off-by: Innei <i@innei.in>
---
 .../src/components/entry-column/index.tsx     |  2 +-
 .../components/entry-column/item-wrapper.tsx  |  2 +-
 .../src/components/entry-content/index.tsx    | 16 +++++++++++++++-
 src/renderer/src/components/ui/loading.tsx    | 19 +++++++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/src/components/ui/loading.tsx

diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
index 38173d40e..50391830c 100644
--- a/src/renderer/src/components/entry-column/index.tsx
+++ b/src/renderer/src/components/entry-column/index.tsx
@@ -187,7 +187,7 @@ const useEntriesByView = () => {
         null,
     [query.data],
   )
-  console.log("remoteEntryIds", remoteEntryIds)
+
   return {
     ...query,
 
diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
index 5a189f024..ab6264561 100644
--- a/src/renderer/src/components/entry-column/item-wrapper.tsx
+++ b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -83,7 +83,7 @@ function EntryItemWrapperImpl({
   }
 
   return (
-    <div className={cn(!views[view || 0].wideMode && "pb-3")}>
+    <div className={cn(!views[view || 0].wideMode && "pb-3")} data-entry-id={entryId}>
       <div
         className={cn(
           "rounded-md bg-background transition-colors",
diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx
index 6dca8202c..0a0624e78 100644
--- a/src/renderer/src/components/entry-content/index.tsx
+++ b/src/renderer/src/components/entry-content/index.tsx
@@ -6,6 +6,7 @@ import { useEntry, useFeedStore } from "@renderer/store"
 import { m } from "framer-motion"
 import { useEffect, useState } from "react"
 
+import { LoadingCircle } from "../ui/loading"
 import { EntryShare } from "./share"
 
 export const EntryContent = ({ entry }: { entry: ActiveEntry }) => {
@@ -32,7 +33,7 @@ export const EntryContent = ({ entry }: { entry: ActiveEntry }) => {
 }
 
 function EntryContentRender({ entryId }: { entryId: string }) {
-  useBizQuery(Queries.entries.byId(entryId), {
+  const { error } = useBizQuery(Queries.entries.byId(entryId), {
     staleTime: 300_000,
   })
 
@@ -79,6 +80,19 @@ function EntryContentRender({ entryId }: { entryId: string }) {
                 new Date(entry.entries.publishedAt).toUTCString()}
               </div>
             </a>
+
+            {!content && (
+              <div className="center mt-16">
+                {!error ? (
+                  <LoadingCircle size="large" />
+                ) : (
+                  <div className="center flex flex-col gap-2">
+                    <i className="i-mingcute-close-line text-3xl text-red-500" />
+                    <span className="font-sans text-sm">Network Error</span>
+                  </div>
+                )}
+              </div>
+            )}
             <div className="prose prose-zinc mx-auto mb-32 mt-10 max-w-full cursor-auto select-text break-all text-[15px] dark:prose-invert">
               {content}
             </div>
diff --git a/src/renderer/src/components/ui/loading.tsx b/src/renderer/src/components/ui/loading.tsx
new file mode 100644
index 000000000..e98fff987
--- /dev/null
+++ b/src/renderer/src/components/ui/loading.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@renderer/lib/utils"
+
+interface LoadingCircleProps {
+  size: "small" | "medium" | "large"
+}
+
+const sizeMap = {
+  small: "text-md",
+  medium: "text-xl",
+  large: "text-3xl",
+}
+export const LoadingCircle: Component<LoadingCircleProps> = ({
+  className,
+  size,
+}) => (
+  <div className={cn(sizeMap[size], className)}>
+    <i className="i-mingcute-loading-3-line animate-spin" />
+  </div>
+)