jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Added skeleton on store loading

Browse source
This commit is contained in:
Lucas Oliveira 2023-10-25 19:19:22 -03:00
commit 0d55ce9f06
1 changed files with 65 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/frontend/src/pages/StorePage/index.tsx
View file

@ -3,6 +3,7 @@ import { Link, Search } from "lucide-react";
import { useContext, useEffect, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import Header from "../../components/headerComponent";
import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
@ -117,7 +118,6 @@ export default function StorePage(): JSX.Element {
<span className="community-page-description-text">
Search flows and components from the community.
</span>
{renderComponents && (
<div className="flex w-full flex-col gap-4 p-4">
<div className="flex items-center justify-center gap-4">
<div className="flex w-[13%] items-center justify-center gap-3 text-sm">
@ -152,9 +152,7 @@ export default function StorePage(): JSX.Element {
<Select
onValueChange={(value) => {
const filter = value === "Flow" ? false : true;
const search = data.filter(
(f) => f.is_component === filter
);
const search = data.filter((f) => f.is_component === filter);
value === "" ? setSearchData(data) : setSearchData(search);
}}
>
@ -169,8 +167,9 @@ export default function StorePage(): JSX.Element {
</Select>
</div>
</div>
<div className="flex items-center justify-center gap-4">
{Array.from(new Set(searchData.map((i) => i.is_component))).map(
<div className="flex h-2 items-center justify-center gap-4">
{renderComponents &&
Array.from(new Set(searchData.map((i) => i.is_component))).map(
(i, idx) => (
<Badge
onClick={() => {
@ -202,7 +201,14 @@ export default function StorePage(): JSX.Element {
)}
</div>
<div className="mt-6 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
{searchData
{loadingWithApiKey ? (
<>
<SkeletonCardComponent />
<SkeletonCardComponent />
<SkeletonCardComponent />
</>
) : (
searchData
.filter(
(f) =>
Array.from(filteredCategories).length === 0 ||
@ -210,14 +216,10 @@ export default function StorePage(): JSX.Element {
)
.map((item, idx) => (
<MarketCardComponent key={idx} data={item} />
))}
))
)}
</div>
</div>
)}
{loadingWithApiKey && (
<div className="flex w-full flex-col gap-4 p-4">Loading...</div>
)}
</div>
</>
);