indicator on search

Author: 1cg

www/_includes/layout.njk

@@ -49,8 +49,10 @@ title: hyperscript
                          if my value is ''
                            empty #search-results
                            add .hidden to #search-results
+                           add .hidden to #search-spinner
                            exit
                          end
+                         remove .hidden from #search-spinner
                          set response to pagefind.search(my value)
                          set items to response.results[0 .. 9].map( \ i -> i.data() )
                          set output to ''
@@ -61,6 +63,8 @@ title: hyperscript
                                + '</a>'
                          end
                          put output into #search-results
+                         add .selected to first <a/> in #search-results
+                         add .hidden to #search-spinner
                          remove .hidden from #search-results
                        end
 
@@ -107,6 +111,7 @@ title: hyperscript
                          clear me
                          empty #search-results
                          add .hidden to #search-results
+                         add .hidden to #search-spinner
                          blur
                        end
 
@@ -115,7 +120,15 @@ title: hyperscript
                          add .hidden to #search-results
                        end"
                 />
-                <div id="search-results" class="search-results hidden"></div>
+                <div id="search-spinner" class="search-spinner hidden"></div>
+                <div id="search-results" class="search-results hidden"
+                     _="on mouseover
+                          set link to closest <a/> to event.target
+                          if link exists
+                            remove .selected from <a.selected/> in me
+                            add .selected to link
+                          end
+                        end"></div>
             </div>
             <li><a href="https://github.com/bigskysoftware/_hyperscript" class="nav-github" aria-label="GitHub"><svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg></a>
         </ul>

www/css/os9.css

@@ -238,12 +238,10 @@ body {
     border-radius: 3px;
     font-family: var(--font);
 }
-.search-result:hover,
 .search-result.selected {
     background: var(--accent);
     color: white;
 }
-.search-result:hover .search-result-excerpt,
 .search-result.selected .search-result-excerpt {
     color: rgba(255,255,255,0.85);
 }
@@ -268,10 +266,26 @@ body {
     padding: 0 1px;
     border-radius: 2px;
 }
-.search-result:hover .search-result-excerpt mark,
 .search-result.selected .search-result-excerpt mark {
     background: rgba(255,255,255,0.25);
 }
+.search-spinner {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    margin-top: -6px;
+    border: 2px solid var(--border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: search-spin 0.6s linear infinite;
+    pointer-events: none;
+}
+.search-spinner.hidden { display: none; }
+@keyframes search-spin {
+    to { transform: rotate(360deg); }
+}
 
 /* Hamburger */
 .hamburger {