Selaa lähdekoodia

added preloader and render main when search goods === 0

makstravm 3 vuotta sitten
vanhempi
commit
48f2299feb
3 muutettua tiedostoa jossa 17 lisäystä ja 0 poistoa
  1. 1 0
      HW19/index.html
  2. 8 0
      HW19/main.js
  3. 8 0
      HW19/style.css

+ 1 - 0
HW19/index.html

@@ -34,6 +34,7 @@
 </head>
 
 <body id="body">
+    <div id="preLoader"><img src="colorful-loader-gif-.gif" alt=""></div>
     <div class="user__box">
         <div id="user">
         </div>

+ 8 - 0
HW19/main.js

@@ -478,6 +478,11 @@ store.dispatch(actionGoodById())
 
 // рисуем категории
 
+store.subscribe(() => {
+    let a = Object.entries(store.getState().promise).map(t => t[1].status === 'PENDING')
+    let ss = el => el === true
+    a.some(ss) ? preLoader.style.display = 'block' : preLoader.style.display = 'none'
+})
 store.subscribe(() => {
     const { rootCats } = store.getState().promise
     if (rootCats?.payload) {
@@ -648,6 +653,9 @@ store.subscribe(() => {
     const [, route, _id] = location.hash.split('/')
     if (sort?.payload && route === 'search') {
         main.innerHTML = ``
+        if (sort.payload.length === 0) {
+            main.innerHTML = `<strong>Совпадений нет!!!</strong>`
+        }
         for (const { _id, name, price, images } of sort.payload) {
             const product = document.createElement('div')
             product.classList.add('product')

+ 8 - 0
HW19/style.css

@@ -335,3 +335,11 @@ ul {
 .order-sent__btn:hover {
     background-color: rgb(255, 129, 33);
 }
+#preLoader {
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+
+    opacity: 0.8;
+}