feat: add is refreshing indicator

Signed-off-by: Innei <i@innei.in>
RSSNext · Jul 29, 2024 · 0686ebe · 0686ebe
1 parent 9db3ef5
commit 0686ebe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/renderer/src/components/ui/media.tsx b/src/renderer/src/components/ui/media.tsx
@@ -94,7 +94,7 @@ const MediaImpl: FC<MediaProps> = ({
             className={cn(
               hidden && "hidden",
               !(props.width || props.height) && "size-full",
-              "bg-stone-100 object-cover dark:bg-neutral-800",
+              "bg-gray-200 object-cover dark:bg-neutral-800",
               popper && "cursor-zoom-in",
               mediaContainerClassName,
             )}

diff --git a/src/renderer/src/modules/entry-column/index.tsx b/src/renderer/src/modules/entry-column/index.tsx
@@ -6,6 +6,7 @@ import {
 import { useMe } from "@renderer/atoms/user"
 import { m } from "@renderer/components/common/Motion"
 import { EmptyIcon } from "@renderer/components/icons/empty"
+import { AutoResizeHeight } from "@renderer/components/ui/auto-resize-height"
 import { ActionButton, StyledButton } from "@renderer/components/ui/button"
 import { DividerVertical } from "@renderer/components/ui/divider"
 import { LoadingCircle } from "@renderer/components/ui/loading"
@@ -137,6 +138,7 @@ export function EntryColumn() {
   } satisfies VirtuosoProps<string, unknown>
 
   const navigate = useNavigateEntry()
+  const isRefreshing = entries.isFetching && !entries.isFetchingNextPage
   return (
     <div
       className="relative flex h-full flex-1 flex-col"
@@ -148,10 +150,18 @@ export function EntryColumn() {
     >
       <ListHeader
         refetch={entries.refetch}
-        isRefreshing={entries.isFetching && !entries.isFetchingNextPage}
+        isRefreshing={isRefreshing}
         totalCount={virtuosoOptions.totalCount}
         hasUpdate={entries.hasUpdate}
       />
+      <AutoResizeHeight spring>
+        {isRefreshing && (
+          <div className="center h-7 gap-2 bg-theme-accent text-xs text-white">
+            <LoadingCircle size="small" />
+            Refreshing new entries...
+          </div>
+        )}
+      </AutoResizeHeight>
       <m.div
         key={`${routeFeedId}-${view}`}
         className="h-full"