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

128
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,60 +118,58 @@ 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"> Added Only <Switch />
Added Only <Switch />
</div>
<div className="relative h-12 w-[35%]">
<Input
placeholder="Search Flows and Components"
className="absolute h-12 px-5"
onChange={(e) => {
setInputText(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSearch(inputText);
}
}}
value={inputText}
/>
<Search className="absolute bottom-0 right-4 top-0 my-auto h-6 stroke-1 text-muted-foreground " />
</div>
<div className="flex items-center justify-center text-sm">
<Button
onClick={() => {
handleSearch(inputText);
}}
>
Search
</Button>
</div>
<div className="flex w-[13%] items-center justify-center gap-3 text-sm">
<Select
onValueChange={(value) => {
const filter = value === "Flow" ? false : true;
const search = data.filter(
(f) => f.is_component === filter
);
value === "" ? setSearchData(data) : setSearchData(search);
}}
>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Flows" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Flow">Flows</SelectItem>
<SelectItem value="Component">Components</SelectItem>
<SelectItem value="">Both</SelectItem>
</SelectContent>
</Select>
</div>
</div> </div>
<div className="flex items-center justify-center gap-4"> <div className="relative h-12 w-[35%]">
{Array.from(new Set(searchData.map((i) => i.is_component))).map( <Input
placeholder="Search Flows and Components"
className="absolute h-12 px-5"
onChange={(e) => {
setInputText(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
handleSearch(inputText);
}
}}
value={inputText}
/>
<Search className="absolute bottom-0 right-4 top-0 my-auto h-6 stroke-1 text-muted-foreground " />
</div>
<div className="flex items-center justify-center text-sm">
<Button
onClick={() => {
handleSearch(inputText);
}}
>
Search
</Button>
</div>
<div className="flex w-[13%] items-center justify-center gap-3 text-sm">
<Select
onValueChange={(value) => {
const filter = value === "Flow" ? false : true;
const search = data.filter((f) => f.is_component === filter);
value === "" ? setSearchData(data) : setSearchData(search);
}}
>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Flows" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Flow">Flows</SelectItem>
<SelectItem value="Component">Components</SelectItem>
<SelectItem value="">Both</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<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) => ( (i, idx) => (
<Badge <Badge
onClick={() => { onClick={() => {
@ -200,9 +199,16 @@ export default function StorePage(): JSX.Element {
</Badge> </Badge>
) )
)} )}
</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>
</> </>
); );