{model.name}
-
+ e.preventDefault()}>
{model.street}, {model.city}
{model.zipCode}, {model.countryWithState}
diff --git a/src/Stores/Article.js b/src/Stores/Article.js
index bebfa15..43780f9 100644
--- a/src/Stores/Article.js
+++ b/src/Stores/Article.js
@@ -3,6 +3,7 @@ import { SortOrder } from 'kentico-cloud-delivery';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { initLanguageCodeObject, defaultLanguage } from '../Utilities/LanguageCodes';
+import { spinnerService } from '@chevtek/react-spinners';
let unsubscribe = new Subject();
const resetStore = () => ({
@@ -34,6 +35,10 @@ class Article {
query.languageParameter(language);
}
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
+
query.getObservable()
.pipe(takeUntil(unsubscribe))
.subscribe(response => {
@@ -48,7 +53,7 @@ class Article {
})
}
- provideArticles(count, language) {
+ provideArticles(language) {
let query = Client.items()
.type('article')
@@ -58,6 +63,10 @@ class Article {
query.languageParameter(language);
}
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
+
query.getObservable()
.pipe(takeUntil(unsubscribe))
.subscribe(response => {
@@ -72,15 +81,16 @@ class Article {
// Methods
getArticle(articleId, language) {
+ spinnerService.hide('apiSpinner');
if (language) {
return articleDetails[language][articleId];
} else {
return articleDetails[defaultLanguage][articleId];
}
-
}
getArticles(count, language) {
+ spinnerService.hide('apiSpinner');
if (language) {
return articleList[language].slice(0, count);
}
diff --git a/src/Stores/Brewer.js b/src/Stores/Brewer.js
index fcd575c..d5b6e3a 100644
--- a/src/Stores/Brewer.js
+++ b/src/Stores/Brewer.js
@@ -2,6 +2,7 @@ import { Client } from "../Client.js";
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { initLanguageCodeObject, defaultLanguage } from '../Utilities/LanguageCodes'
+import { spinnerService } from '@chevtek/react-spinners';
let unsubscribe = new Subject();
let changeListeners = [];
@@ -138,41 +139,58 @@ class Brewer {
// Actions
- provideBrewer(brewerSlug, language) {
+ provideBrewer(language) {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchBrewers(language);
}
provideBrewers(language) {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchBrewers(language);
}
provideManufacturers() {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchManufacturers();
}
provideProductStatuses() {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchProductStatuses();
}
// Methods
getBrewer(brewerSlug, language) {
+ spinnerService.hide('apiSpinner');
return brewers[language || defaultLanguage].find((brewer) => brewer.urlPattern.value === brewerSlug);
}
getBrewers(language) {
+ spinnerService.hide('apiSpinner');
return brewers[language];
}
getManufacturers() {
+ spinnerService.hide('apiSpinner');
return manufacturers;
}
getProductStatuses() {
+ spinnerService.hide('apiSpinner');
return productStatuses;
}
getFilter() {
+ spinnerService.hide('apiSpinner');
return brewerFilter;
}
diff --git a/src/Stores/Cafe.js b/src/Stores/Cafe.js
index c020b23..33f3abf 100644
--- a/src/Stores/Cafe.js
+++ b/src/Stores/Cafe.js
@@ -2,6 +2,7 @@ import { Client } from "../Client.js";
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { initLanguageCodeObject, defaultLanguage, languageCodes } from '../Utilities/LanguageCodes'
+import { spinnerService } from '@chevtek/react-spinners';
let unsubscribe = new Subject();
let changeListeners = [];
@@ -55,20 +56,28 @@ class Cafe {
// Actions
providePartnerCafes(language) {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchCafes(language);
}
provideCompanyCafes(language) {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchCafes(language);
}
// Methods
getPartnerCafes(language) {
+ spinnerService.hide('apiSpinner');
return cafes[language].filter((cafe) => cafe.country.value !== "USA");
}
getCompanyCafes(language) {
+ spinnerService.hide('apiSpinner');
return cafes[language].filter((cafe) => cafe.country.value === "USA");
}
diff --git a/src/Stores/Coffee.js b/src/Stores/Coffee.js
index 29a1f59..17645a3 100644
--- a/src/Stores/Coffee.js
+++ b/src/Stores/Coffee.js
@@ -2,6 +2,7 @@ import { Client } from "../Client.js";
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { initLanguageCodeObject, defaultLanguage } from '../Utilities/LanguageCodes'
+import { spinnerService } from '@chevtek/react-spinners';
let unsubscribe = new Subject();
let changeListeners = [];
@@ -109,38 +110,53 @@ class Coffee {
// Actions
- provideCoffee(coffeeSlug, language) {
+ provideCoffee(language) {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchCoffees(language);
}
provideCoffees(language) {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchCoffees(language);
}
provideProcessings() {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchProcessings();
}
provideProductStatuses() {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchProductStatuses();
}
// Methods
getCoffee(coffeeSlug, language) {
- ;
+ spinnerService.hide('apiSpinner');
return coffees[language || defaultLanguage].find((coffee) => coffee.urlPattern.value === coffeeSlug);
}
getCoffees(language) {
+ spinnerService.hide('apiSpinner');
return coffees[language];
}
getProcessings() {
+ spinnerService.hide('apiSpinner');
return processings;
}
getProductStatuses() {
+ spinnerService.hide('apiSpinner');
return productStatuses;
}
diff --git a/src/Stores/Fact.js b/src/Stores/Fact.js
index ddafe7f..6f02345 100644
--- a/src/Stores/Fact.js
+++ b/src/Stores/Fact.js
@@ -2,6 +2,7 @@ import { Client } from "../Client.js";
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { initLanguageCodeObject, defaultLanguage } from '../Utilities/LanguageCodes'
+import { spinnerService } from '@chevtek/react-spinners';
let unsubscribe = new Subject();
let changeListeners = [];
@@ -45,12 +46,16 @@ class Fact {
// Actions
provideFacts(language, urlSlug) {
+ if (spinnerService.isShowing('apiSpinner') === false) {
+ spinnerService.show('apiSpinner');
+ }
fetchFacts(language, urlSlug);
}
// Methods
getFacts(language) {
+ spinnerService.hide('apiSpinner');
return facts[language];
}
diff --git a/src/index.css b/src/index.css
index 0d40461..6318cd2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6114,4 +6114,33 @@ body {
.application-content table.user-message td {
vertical-align: top;
+}
+
+.loader-bg {
+ position: fixed;
+ z-index: 10;
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(226, 226, 226, 0.5);
+}
+
+.loader {
+ border: solid 15px transparent;
+ border-bottom-color: #1D1D1D;
+ border-radius: 50%;
+ content: "";
+ height: 10em;
+ width: 10em;
+ animation: spin 1s infinite linear;
+}
+
+/* Not a fan of this, but 'react-spinners' plugin doesn't let you change the inline style of inline-block or set a className to override */
+.application-content > div:first-child {
+ display: block !important;
}
\ No newline at end of file