ywana-core8 0.0.800 → 0.0.801

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.800",
+  "version": "0.0.801",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain2/CollectionContext.js

@@ -21,6 +21,8 @@ export const CollectionContextProvider = (props) => {
     const [queries, setQueries] = useState([])
     const [selected, setSelected] = useState(null)
 
+    const [loading, setLoading] = useState(false)
+
     useEffect(() => {
         let mounted = true;
         const callLoad = async () => {
@@ -34,7 +36,6 @@ export const CollectionContextProvider = (props) => {
     }, [filters])
 
     useEffect(() => {
-        console.log("Run custom filters", customFilters, all)
         if (all.length>0) runCustomFilters()
     }, [all, customFilters])
 
@@ -48,14 +49,18 @@ export const CollectionContextProvider = (props) => {
         }
         */
 
+        setLoading(true)
+
         try {
             const response = await API.all(filters, likes, page);
             const next = field ? response[field] : response;
+            setLoading(false)
             //const data = runCustomFilters(next)
             //return data
             return next;
         } catch (error) {
             console.log(error)
+            setLoading(false)
         }
         return
     }
@@ -166,7 +171,10 @@ export const CollectionContextProvider = (props) => {
     }
 
     const value = {
+
+        
         all,
+        loading, 
         load,
         reload,
 

package/src/domain2/CollectionList.css

@@ -1,4 +1,5 @@
 .collection-list {
+    position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -14,4 +15,18 @@
     padding: .5rem;
     display: flex;
     align-items: center;
+}
+
+.collection-list .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, .5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
 }

package/src/domain2/CollectionList.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { List, TextField, Icon } from '../html'
+import { List, TextField, Icon, CircularProgress } from '../html'
 import { CollectionContext } from './CollectionContext'
 import './CollectionList.css'
 
@@ -10,7 +10,7 @@ export const CollectionList = (props) => {
 
     const { itemRenderer, groupBy, groupRenderer, searchBy = [], sortBy, sortDir } = props
     const context = useContext(CollectionContext)
-    const { all = [], filtered=[], selected, filters, customFilters } = context
+    const { all = [], filtered=[], selected, filters, customFilters, loading } = context
     const [search, setSearch] = useState('')
 
     function changeSearch(id, value) {
@@ -56,6 +56,7 @@ export const CollectionList = (props) => {
                     <TextField onChange={changeSearch} outlined />
                 </div>
             ) : null}
+            { loading ? <div className="loading"><CircularProgress /></div> : null}
         </div>
     )
 }