fixed pagination problem in default menus in block menu

This commit is contained in:
Abhimanyu Yadav
2025-05-30 17:26:59 +05:30
parent f3a7be1fd3
commit cf057cbbda
7 changed files with 21 additions and 31 deletions

View File

@@ -45,7 +45,7 @@ const ErrorState: React.FC<ErrorStateProps> = ({
variant="default"
size="sm"
onClick={onRetry}
className="mt-2 h-7 text-xs"
className="mt-2 h-7 bg-zinc-800 text-xs"
>
<RefreshCw className="mr-1 h-3 w-3" />
{retryLabel}

View File

@@ -7,6 +7,7 @@ import { useBackendAPI } from "@/lib/autogpt-server-api/context";
import { BlockCategoryResponse } from "@/lib/autogpt-server-api";
import { useBlockMenuContext } from "../block-menu-provider";
import ErrorState from "../ErrorState";
import { beautifyString } from "@/lib/utils";
const AllBlocksContent: React.FC = () => {
const { addNode } = useBlockMenuContext();
@@ -65,10 +66,10 @@ const AllBlocksContent: React.FC = () => {
}
};
if (loading) {
if (!loading) {
return (
<div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
<div className="w-full px-4 pb-4">
<div className="w-full space-y-3 px-4 pb-4">
{[0, 1, 3].map((categoryIndex) => (
<Fragment key={categoryIndex}>
{categoryIndex > 0 && (
@@ -109,7 +110,7 @@ const AllBlocksContent: React.FC = () => {
<div className="space-y-2.5">
<div className="flex items-center justify-between">
<p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
{category.name}
{category.name && beautifyString(category.name)}
</p>
<span className="rounded-full bg-zinc-100 px-[0.375rem] font-sans text-sm leading-[1.375rem] text-zinc-600">
{category.total_blocks}

View File

@@ -6,7 +6,6 @@ const BlockMenuSidebar: React.FC = ({}) => {
const { defaultState, setDefaultState, setIntegration } =
useBlockMenuContext();
// TEMPORARY FETCHING
const topLevelMenuItems = [
{
name: "Suggestion",

View File

@@ -19,8 +19,11 @@ const MarketplaceAgentsContent: React.FC = () => {
if (loading) {
return (
<div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
<div className="w-full px-4 pb-4">
<div
ref={scrollRef}
className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200"
>
<div className="w-full space-y-3 px-4 pb-4">
{[0, 1, 2, 3, 4].map((index) => (
<MarketplaceAgentBlock.Skeleton key={index} />
))}

View File

@@ -19,8 +19,11 @@ const MyAgentsContent: React.FC = () => {
if (loading) {
return (
<div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
<div className="w-full px-4 pb-4">
<div
ref={scrollRef}
className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200"
>
<div className="w-full space-y-3 px-4 pb-4">
{[0, 1, 2, 3, 4].map((index) => (
<UGCAgentBlock.Skeleton key={index} />
))}

View File

@@ -27,25 +27,6 @@ const PaginatedBlocksContent: React.FC<PaginatedBlocksContentProps> = ({
pageSize,
});
if (loading) {
return (
<div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
<div className="w-full px-4 pb-4">
{[0, 1, 3].map((categoryIndex) => (
<Fragment key={categoryIndex}>
{categoryIndex > 0 && (
<div className="my-4 h-[1px] w-full bg-zinc-100" />
)}
{[0, 1, 2].map((blockIndex) => (
<Block.Skeleton key={`${categoryIndex}-${blockIndex}`} />
))}
</Fragment>
))}
</div>
</div>
);
}
if (error) {
return (
<div className="h-full w-full px-4 pb-4">

View File

@@ -21,9 +21,12 @@ const PaginatedIntegrationList: React.FC = () => {
if (loading) {
return (
<div className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200">
<div className="w-full px-4 pb-4">
{[0, 1, 3].map((integrationIndex) => (
<div
ref={scrollRef}
className="scrollbar-thumb-rounded h-full overflow-y-auto pt-4 transition-all duration-200 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-transparent hover:scrollbar-thumb-zinc-200"
>
<div className="w-full space-y-3 px-4 pb-4">
{[0, 1, 3, 4, 5].map((integrationIndex) => (
<Integration.Skeleton key={integrationIndex} />
))}
</div>