diff --git a/app/assets/stylesheets/load.scss b/app/assets/stylesheets/load.scss new file mode 100644 index 0000000000..ee8c9288ec --- /dev/null +++ b/app/assets/stylesheets/load.scss @@ -0,0 +1,105 @@ +.loader-s { + width: fit-content; + font-size: 40px; + font-family: monospace; + font-weight: bold; + text-transform: uppercase; + color: #0000; + -webkit-text-stroke: 1px #000; + --g: conic-gradient(#000 0 0) no-repeat text; + background: + var(--g) 0, + var(--g) 1ch, + var(--g) 2ch, + var(--g) 3ch, + var(--g) 4ch, + var(--g) 5ch, + var(--g) 6ch; + background-position-y: 100%, 0; + animation: l16 2s linear infinite alternate; +} +.loader-s:before { + content: 'Loading'; +} +@keyframes l16 { + 0% { + background-size: + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0; + } + 14.28% { + background-size: + 1ch 100%, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0; + } + 28.57% { + background-size: + 1ch 100%, + 1ch 100%, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0; + } + 42.85% { + background-size: + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 0, + 1ch 0, + 1ch 0, + 1ch 0; + } + 57.14% { + background-size: + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 0, + 1ch 0, + 1ch 0; + } + 71.43% { + background-size: + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 0, + 1ch 0; + } + 85.71% { + background-size: + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 0; + } + 100% { + background-size: + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%, + 1ch 100%; + } +} diff --git a/app/javascript/components/command_bar/results.js b/app/javascript/components/command_bar/results.js index 221dc0075c..89d33c9c58 100644 --- a/app/javascript/components/command_bar/results.js +++ b/app/javascript/components/command_bar/results.js @@ -3,7 +3,6 @@ import React from 'react' import { KBarResults, useMatches } from 'kbar' import { Guide } from './search/guide' - export function RenderResults() { const { results, rootActionId } = useMatches() return ( @@ -38,7 +37,7 @@ export function RenderResults() { ) : item == 'search_guide' || item.id?.startsWith('results:') ? ( ) : ( - 'Loading...' +
)} ) : (