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