diff --git a/resources/components/search.less b/resources/components/search.less
index 58d90372..d4bf5b96 100644
--- a/resources/components/search.less
+++ b/resources/components/search.less
@@ -7,263 +7,285 @@
 
 // TODO: Make it configurable and flexible
 #site-search {
-	#search-form {
-		position: absolute;
-		z-index: -1; // Not interactable
-		margin: 7px 0 8px; // 1px h3 screen reader
-		display: flex;
-		top: 0;
-		right: @icon-box-size + @icon-padding * 2;
-		opacity: 0;
-		.boxshadow(4);
-		transition: @transition-opacity;
+    #search-form {
+        position: absolute;
+        z-index: -1; // Not interactable
+        margin: 7px 0 8px; // 1px h3 screen reader
+        display: flex;
+        top: 0;
+        right: @icon-box-size + @icon-padding * 2;
+        opacity: 0;
+        .boxshadow(4);
+        transition: @transition-opacity;
 
-		// Search field
-		#search-input {
-			-webkit-appearance: none;
-			-moz-appearance: none;
-			appearance: none;
-			padding: 12px 15px;
-			width: 0;
-			max-width: calc( ~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
-			border: 1px solid @base-90;
-			transition: @transition-width, @transition-box-shadow;
+        // Search field
+        #search-input {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            padding: 12px 15px;
+            width: 0;
+            max-width: calc(~'100vw -'@icon-box-size * 2 + @icon-padding * 4 + @margin-side );
+            border: 1px solid @base-90;
+            transition: @transition-width, @transition-box-shadow;
 
-			&:focus {
-				outline: 0;
-				.boxshadow(5);
-			}
-		}
+            &:focus {
+                outline: 0;
+                .boxshadow(5);
+            }
+        }
 
-		// Search field button
-		#search-button {
-			.button-blue;
-			width: @icon-box-size + @icon-padding * 2;
-			height: 42px;
-			border: 0;
-			cursor: pointer; //somehow it is not pointer
+        // Search field button
+        #search-button {
+            .button-blue;
+            width: @icon-box-size + @icon-padding * 2;
+            height: 42px;
+            border: 0;
+            cursor: pointer; //somehow it is not pointer
 
-			img {
-				filter: invert( 1 );
-				width: 16px;
-			}
+            img {
+                filter: invert(1);
+                width: 16px;
+            }
 
-			&:hover,
-			&:active,
-			&:focus {
-				.button-blue-active;
-			}
-		}
-	}
+            &:hover,
+            &:active,
+            &:focus {
+                .button-blue-active;
+            }
+        }
+    }
 
-	#search-toggle-icon-container {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: inherit;
+    #search-toggle-icon-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: inherit;
 
-		#search-toggle-icon {
-			opacity: @opacity-icon;
-			position: absolute;
-			margin-top: -2px;
-			margin-left: -2px;
-			width: 10px;
-			height: 10px;
-			border: solid 2px @base-0;
-			border-radius: 100%;
-			transform: rotate( -45deg );
-			transition: @transition-transform, @transition-height, @transition-opacity, @transition-border-color;
+        #search-toggle-icon {
+            opacity: @opacity-icon;
+            position: absolute;
+            margin-top: -2px;
+            margin-left: -2px;
+            width: 10px;
+            height: 10px;
+            border: solid 2px @base-0;
+            border-radius: 100%;
+            transform: rotate(-45deg);
+            transition: @transition-transform, @transition-height, @transition-opacity, @transition-border-color;
 
-			&:before,
-			&:after {
-				content: '';
-				position: absolute;
-				width: 2px;
-				background-color: @base-0;
-				transition: inherit;
-			}
+            &:before,
+            &:after {
+                content: '';
+                position: absolute;
+                width: 2px;
+                background-color: @base-0;
+                transition: inherit;
+            }
 
-			&:before {
-				top: 10px;
-				left: 3px;
-				height: 10px;
-			}
+            &:before {
+                top: 10px;
+                left: 3px;
+                height: 10px;
+            }
 
-			&:after {
-				opacity: 0;
-				top: -1px;
-				left: 4px;
-				height: 18px;
-				transform: rotate( -90deg );
-			}
-		}
-	}
+            &:after {
+                opacity: 0;
+                top: -1px;
+                left: 4px;
+                height: 18px;
+                transform: rotate(-90deg);
+            }
+        }
+    }
 
-	#search-toggle {
-		&:checked {
-			~ #search-form {
-				z-index: 5;
-				opacity: 1;
+    #search-toggle {
+        &:checked {
+            ~#search-form {
+                z-index: 5;
+                opacity: 1;
 
-				#search-input {
-					width: 400px;
-				}
-			}
+                #search-input {
+                    width: 400px;
+                }
+            }
 
-			~ #search-toggle-icon-container #search-toggle-icon {
-				border-color: transparent;
+            ~#search-toggle-icon-container #search-toggle-icon {
+                border-color: transparent;
 
-				&:before {
-					height: 18px;
-					transform: translate( 1px, -11px );
-				}
+                &:before {
+                    height: 18px;
+                    transform: translate(1px, -11px);
+                }
 
-				&:after {
-					opacity: 1;
-				}
+                &:after {
+                    opacity: 1;
+                }
 
-				&:hover {
-					~ #search-toggle-icon-container #search-toggle-icon {
-						border-color: @base-0;
+                &:hover {
+                    ~#search-toggle-icon-container #search-toggle-icon {
+                        border-color: @base-0;
 
-						&:after {
-							opacity: 0;
-						}
-					}
-				}
-			}
+                        &:after {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
 
-			&:hover {
-				~ #search-toggle-icon-container #search-toggle-icon {
-					border-color: @base-0;
+            &:hover {
+                ~#search-toggle-icon-container #search-toggle-icon {
+                    border-color: @base-0;
 
-					&:after {
-						height: 12px;
-					}
-				}
-			}
-		}
+                    &:after {
+                        height: 12px;
+                    }
+                }
+            }
+        }
 
-		&:hover {
-			~ #search-toggle-icon-container #search-toggle-icon {
-				opacity: @opacity-icon-active;
+        &:hover {
+            ~#search-toggle-icon-container #search-toggle-icon {
+                opacity: @opacity-icon-active;
 
-				&:before {
-					height: 5px;
-					transform: translate( 0, 5px );
-				}
-			}
-		}
-	}
+                &:before {
+                    height: 5px;
+                    transform: translate(0, 5px);
+                }
+            }
+        }
+    }
 }
 
 #typeahead-suggestions {
-	position: absolute;
-	top: @header-height;
-	z-index: 99999;
+    position: absolute;
+    top: @header-height;
+    z-index: 99999;
 }
 
 .suggestions-dropdown {
-	background: @base-100;
-	.boxshadow(4);
-	width: @suggestion-max-width;
-	max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
+    background: @base-100;
+    .boxshadow(4);
+    width: @suggestion-max-width;
+    max-width: calc(~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
 }
 
 .suggestion-link {
-	display: block;
-	position: relative;
-	min-height: 2rem * @content-scaling;
-	padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
-	border-bottom: 1px solid @base-90;
+    display: block;
+    position: relative;
+    min-height: 2rem * @content-scaling;
+    padding: 1rem 1rem 1rem 8.5rem * @content-scaling;
+    border-bottom: 1px solid @base-90;
 }
 
 .suggestion-title {
-	margin: 0 0 0.78rem * @content-scaling 0;
-	color: @base-10;
-	font-size: 1.6rem * @content-scaling;
-	font-weight: normal;
-	line-height: 1.872rem * @content-scaling;
+    margin: 0 0 0.78rem * @content-scaling 0;
+    color: @base-10;
+    font-size: 1.6rem * @content-scaling;
+    font-weight: normal;
+    line-height: 1.872rem * @content-scaling;
 }
 
 .suggestion-link.active .suggestion-title {
-	color: @accent-50;
+    color: @accent-50;
 }
 
 .suggestion-highlight {
-	font-weight: 600;
-	font-style: normal;
+    font-weight: 600;
+    font-style: normal;
 }
 
 .suggestion-description {
-	color: @base-30;
-	margin: 0;
-	font-family: @fonts;
-	font-size: 1.3rem * @content-scaling;
-	line-height: 1.43rem * @content-scaling;
+    color: @base-30;
+    margin: 0;
+    font-family: @fonts;
+    font-size: 1.3rem * @content-scaling;
+    line-height: 1.43rem * @content-scaling;
 }
 
 .suggestion-link.active {
-	background-color: @accent-90;
+    background-color: @accent-90;
 }
 
 /* using element selector to override default anchor styles */
 a.suggestion-link:hover {
-	text-decoration: none;
+    text-decoration: none;
 }
 
 .suggestion-thumbnail {
-	background-color: @base-80;
-	background-position: center center;
-	background-repeat: no-repeat;
-	background-size: cover;
-	height: 100%;
-	width: 7rem * @content-scaling;
-	position: absolute;
-	top: 0;
-	left: 0;
+    background-color: @base-80;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    width: 7rem * @content-scaling;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .suggestion-placeholder {
-	.suggestion-title {
-		width: 30%;
-		height: 1.6rem * @content-scaling;
-	}
-	.suggestion-description {
-		width: 70%;
-		height: 1.3rem * @content-scaling;
-	}
-	.suggestion-title,
-	.suggestion-description {
-		background-color: @base-80;
-	}
+    .suggestion-title {
+        width: 30%;
+        height: 1.6rem * @content-scaling;
+    }
+
+    .suggestion-description {
+        width: 70%;
+        height: 1.3rem * @content-scaling;
+    }
+
+    .suggestion-title,
+    .suggestion-description {
+        background-color: @base-80;
+        animation-duration: 1.8s;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-name: placeHolderShimmer;
+        animation-timing-function: linear;
+        background: @base-70;
+        background: linear-gradient(to right, @base-90 8%, @base-80 38%, @base-90 54%);
+        background-size: 1000px 640px;
+        position: relative;
+
+    }
 }
 
 // RTL tweaks
 .rtl {
-	#site-search {
-		#search-form {
-			left: @icon-box-size + @margin-side + @icon-padding;
-			right: unset;
-		}
-	}
+    #site-search {
+        #search-form {
+            left: @icon-box-size + @margin-side + @icon-padding;
+            right: unset;
+        }
+    }
 }
 
-@media only screen and ( max-width: @suggestion-max-width ) {
-	.suggestions-dropdown {
-		position: fixed;
-		left: 0;
-		top: @header-height + 1px;
-		max-width: 100vw;
+@media only screen and (max-width: @suggestion-max-width ) {
+    .suggestions-dropdown {
+        position: fixed;
+        left: 0;
+        top: @header-height + 1px;
+        max-width: 100vw;
 
-		&:after {
-			content: '';
-			width: 100vw;
-			height: 100vh;
-			background: #000;
-			display: block;
-			opacity: 0.7;
-			position: fixed;
-		}
-	}
+        &:after {
+            content: '';
+            width: 100vw;
+            height: 100vh;
+            background: #000;
+            display: block;
+            opacity: 0.7;
+            position: fixed;
+        }
+    }
 }
+
+@keyframes placeHolderShimmer {
+    0% {
+        background-position: -468px 0
+    }
+
+    100% {
+        background-position: 468px 0
+    }
+}
\ No newline at end of file