Skip to content

Commit

Permalink
feat: loading indicator in external pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@DIYgod
DIYgod committed Aug 1, 2024
1 parent 1dc6160 commit a931e85
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 70 deletions.
8 changes: 2 additions & 6 deletions src/renderer/src/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,7 @@ const items = [
},
{
name: "Download",
link: "/download",
},
{
name: "Blog",
link: "/blog",
link: "https://github.com/RSSNext/follow/releases",
},
]

Expand All @@ -39,7 +35,7 @@ export function Header() {
<NavigationMenuList>
{items.map((item) => (
<NavigationMenuItem key={item.link}>
<Link to={item.link}>
<Link to={item.link} target="_blank">
<NavigationMenuLink
className={navigationMenuTriggerStyle()}
>
Expand Down
8 changes: 7 additions & 1 deletion src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { FeedIcon } from "@renderer/components/feed-icon"
import { FollowIcon } from "@renderer/components/icons/follow"
import { StyledButton } from "@renderer/components/ui/button"
import { ListItemHoverOverlay } from "@renderer/components/ui/list-item-hover-overlay"
import { LoadingCircle } from "@renderer/components/ui/loading"
import { views } from "@renderer/constants"
import { useTitle } from "@renderer/hooks/common"
import { FeedViewType } from "@renderer/lib/enum"
Expand Down Expand Up @@ -59,7 +60,12 @@ export function Component() {
useTitle(feed.data?.feed.title)
return (
<>
{feed.data?.feed && (
{feed.isLoading ? (
<LoadingCircle
size="large"
className="center h-48 w-full max-w-full"
/>
) : feed.data?.feed && (
<div className="mx-auto mt-12 flex max-w-5xl flex-col items-center justify-center p-4 lg:p-0">
<FeedIcon
fallback
Expand Down
138 changes: 75 additions & 63 deletions src/renderer/src/pages/(external)/(with-layout)/profile/[id]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
AvatarImage,
} from "@renderer/components/ui/avatar"
import { StyledButton } from "@renderer/components/ui/button"
import { LoadingCircle } from "@renderer/components/ui/loading"
import { useAuthQuery, useTitle } from "@renderer/hooks/common"
import { apiClient } from "@renderer/lib/api-fetch"
import { defineQuery } from "@renderer/lib/defineQuery"
Expand Down Expand Up @@ -33,73 +34,84 @@ export function Component() {
const subscriptions = useUserSubscriptionsQuery(user.data?.id)
useTitle(user.data?.name)

if (!user.data) return null
return (
<div className="container mx-auto mt-12 flex flex-col items-center justify-center p-4 lg:p-0">
<Avatar className="aspect-square size-16">
<AvatarImage src={user.data.image || undefined} />
<AvatarFallback>{user.data.name?.slice(0, 2)}</AvatarFallback>
</Avatar>
<div className="flex flex-col items-center">
<div className="mb-2 mt-4 flex items-center text-2xl font-bold">
<h1>{user.data.name}</h1>
</div>
<div className="mb-8 text-sm text-zinc-500">{user.data.handle}</div>
</div>
<div className="mb-12 w-[70ch] max-w-full space-y-10">
{Object.keys(subscriptions.data || {}).map((category) => (
<div key={category}>
<div className="mb-4 flex items-center text-2xl font-bold">
<h3>{category}</h3>
return user.isLoading ?
(
<LoadingCircle
size="large"
className="center h-48 w-full max-w-full"
/>
) :
(
<div className="container mx-auto mt-12 flex flex-col items-center justify-center p-4 lg:p-0">
<Avatar className="aspect-square size-16">
<AvatarImage src={user.data?.image || undefined} />
<AvatarFallback>{user.data?.name?.slice(0, 2)}</AvatarFallback>
</Avatar>
<div className="flex flex-col items-center">
<div className="mb-2 mt-4 flex items-center text-2xl font-bold">
<h1>{user.data?.name}</h1>
</div>
<div>
{subscriptions.data?.[category].map((subscription) => (
<div
key={subscription.feedId}
className="group relative border-b py-5"
>
<a
className="flex flex-1 cursor-default"
href={subscription.feeds.siteUrl!}
target="_blank"
>
<FeedIcon
fallback
feed={subscription.feeds}
size={22}
className="mr-3"
/>
<div className="mb-8 text-sm text-zinc-500">{user.data?.handle}</div>
</div>
<div className="mb-12 w-[70ch] max-w-full space-y-10">
{subscriptions.isLoading ? (
<LoadingCircle
size="large"
className="center h-48 w-full max-w-full"
/>
) : Object.keys(subscriptions.data || {}).map((category) => (
<div key={category}>
<div className="mb-4 flex items-center text-2xl font-bold">
<h3>{category}</h3>
</div>
<div>
{subscriptions.data?.[category].map((subscription) => (
<div
className={cn(
"w-0 flex-1 grow",
"group-hover:grow-[0.85]",
)}
key={subscription.feedId}
className="group relative border-b py-5"
>
<div className="truncate font-medium leading-none">
{subscription.feeds?.title}
</div>
<div className="mt-1 line-clamp-1 text-xs text-zinc-500">
{subscription.feeds?.description}
</div>
</div>
<a
className="flex flex-1 cursor-default"
href={`/feed/${subscription.feedId}`}
target="_blank"
>
<FeedIcon
fallback
feed={subscription.feeds}
size={22}
className="mr-3"
/>
<div
className={cn(
"w-0 flex-1 grow",
"group-hover:grow-[0.85]",
)}
>
<div className="truncate font-medium leading-none">
{subscription.feeds?.title}
</div>
<div className="mt-1 line-clamp-1 text-xs text-zinc-500">
{subscription.feeds?.description}
</div>
</div>

<a
className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100"
href={`${DEEPLINK_SCHEME}#add?id=${subscription.feeds?.id}`}
onClick={stopPropagation}
>
<StyledButton>
<FollowIcon className="mr-1 size-3" />
{APP_NAME}
</StyledButton>
</a>
</a>
<a
className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100"
href={`${DEEPLINK_SCHEME}#add?id=${subscription.feeds?.id}`}
onClick={stopPropagation}
>
<StyledButton>
<FollowIcon className="mr-1 size-3" />
{APP_NAME}
</StyledButton>
</a>
</a>
</div>
))}
</div>
))}
</div>
</div>
))}
</div>
))}
</div>
</div>
)
</div>
)
}

0 comments on commit a931e85

Please sign in to comment.