placeholder loader if json does not exist

src/components/theme/Header/HomepageSlider.jsx

@@ -5,7 +5,7 @@ import 'react-image-gallery/styles/css/image-gallery.css';
 
 import ImageGallery from 'react-image-gallery';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
-import { Placeholder } from 'semantic-ui-react';
+import { Placeholder, Dimmer, Loader } from 'semantic-ui-react';
 import { getBasePath } from '@eeacms/volto-forests-theme/helpers';
 
 class HomepageSlider extends Component {
@@ -104,11 +104,14 @@ class HomepageSlider extends Component {
 
   render() {
     const slides = this.getSlides(this.props.items.slides);
-    const icon = this.props.items.extra.icon || '';
-    const text = this.props.items.extra.text || '';
-    const link = this.props.items.extra.link || '';
-    const linkText = this.props.items.extra.linkText || '';
-    return (
+    const icon = this.props.items.extra?.icon;
+    const text = this.props.items.extra?.text;
+    const link = this.props.items.extra?.link;
+    const linkText = this.props.items.extra?.linkText;
+
+    const hasHeaderData = this.props.items.extra ? true : false;
+
+    return hasHeaderData ? (
       <div>
         <div className="slider-wrapper">
           <ImageGallery
@@ -139,6 +142,12 @@ class HomepageSlider extends Component {
           </div>
         </div>
       </div>
+    ) : (
+      <div className="loader">
+        <Dimmer active inverted>
+          <Loader />
+        </Dimmer>
+      </div>
     );
   }
 }

theme/addons/volto-addons/imagecards/carousel.overrides

@@ -80,6 +80,12 @@
   }
 }
 
+.loader {
+  position: relative;
+  padding: 100px;
+  margin-top: 200px;
+}
+
 .extra-header {
   position: relative;
   top: -1px;

theme/site/globals/site.overrides

@@ -180,8 +180,8 @@ body.has-toolbar {
   bottom: 0;
   left: 5px;
   display: flex;
-  color: white;
   width: 99%;
+  color: white;
 
   .navigation-prev {
     position: absolute;
@@ -190,25 +190,25 @@ body.has-toolbar {
     cursor: pointer;
   }
 
-  .navigation-prev:hover{
+  .navigation-prev:hover {
     fill: #cd4200 !important;
   }
 
   .navigation-next {
     position: absolute;
-    bottom: 50px;
     right: 0px;
+    bottom: 50px;
     cursor: pointer;
   }
 
-  .navigation-next:hover{
+  .navigation-next:hover {
     fill: #cd4200 !important;
   }
 
-  .lead-nav-wrapper{
+  .lead-nav-wrapper {
     overflow-x: scroll;
     overflow-y: hidden;
-    white-space:nowrap
+    white-space: nowrap;
   }
 
   .active-lead-nav {
@@ -219,26 +219,25 @@ body.has-toolbar {
   }
 
   .lead-navigation-item {
-    padding: 12px 20px;
-    white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
+    padding: 12px 20px;
 
     border: 2px solid #f7f7f5;
 
     margin: 0 2px;
 
     background-color: #f7f7f5;
     border-radius: 3px 3px 0 0;
-    text-decoration: none;
-    text-align: center;
 
     color: #554535;
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
+    text-align: center;
     text-decoration: none;
-
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     @media (max-width: @computerBreakpoint) {
       height: 40px;
@@ -1762,6 +1761,7 @@ span.float-right {
       }
     }
   }
+
   .map-wrapper {
     padding: 5px;
     border: 1px solid @darkGreen;