antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

item loading spinner

Browse Source
This commit is contained in:
Anton 2023-08-22 23:51:06 +02:00
parent 49877c1b4c
commit 539e460f84
2 changed files with 524 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

875
dependency-graph.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 86 KiB

30
src/Components/Map/Layer.tsx
View File

@ -8,6 +8,7 @@ import { useAddItem, useItems, useResetItems } from './hooks/useItems'
import { useEffect, useState } from 'react'
import { useAddLayer } from './hooks/useLayers'
import { ItemFormPopupProps, ItemFormPopup } from './Subcomponents/ItemFormPopup'
import { toast } from 'react-toastify'
export const Layer = (props: LayerProps) => {
@ -43,9 +44,7 @@ export const Layer = (props: LayerProps) => {
const addLayer = useAddLayer();
const resetItems = useResetItems();
useEffect(() => {
resetItems(props);
const loadItems = async () => {
props.data?.map(item => {
if (item.position) {
item.layer = props;
@ -53,7 +52,15 @@ export const Layer = (props: LayerProps) => {
}
})
props.api?.getItems().then(result => {
if(props.api) {
const result = await toast.promise(
props.api!.getItems(),
{
pending: `loading ${props.name} ...`,
success: `${props.name} loaded` ,
error: `error while loading ${props.name}`
}
);
if (result) {
result.map(item => {
if (item.position) {
@ -61,10 +68,20 @@ export const Layer = (props: LayerProps) => {
}
});
}
})
if (props.api || props.api) {
}
if (props.api) {
addLayer(props);
}
}
useEffect(() => {
resetItems(props);
loadItems();
}, [props.data, props.api])
@ -82,6 +99,7 @@ export const Layer = (props: LayerProps) => {
if (tags[1]) {
color2 = tags[1].color;
}
return (
<Marker icon={MarkerIconFactory(props.markerShape, color1, color2, props.markerIcon)} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>