HTMX hide text and show loading spinner while request in progress - html

I'm using HTMX and I have a button inside a form that says 'Send' and when the form is submitted a loading spinner appears next to it. I want the 'Send' to disappear and only the loading spinner to be shown while the request is in progress. How can I do that?
<form hx-post="/test">
<button type="submit">
<span>Send</span>
<svg class="htmx-indicator ml-2 animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="black" fill="transparent" stroke-width="4"></circle>
<path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</button>
</div>
</form>


The .htmx-request class should be added to the button that triggered the request, so you can use that with some CSS to hide the text.
https://htmx.org/docs/#request-operations

Related

Overlay SVG animation on top of another SVG

I am trying to make a loading screen for my React app but without the high-CPU load of SVG animations. I came across this article about splitting the static and animated assets into separate SVGs for a performance gain. My app uses MUI but I want the spinner to be loaded before MUI loads to avoid a blank screen, so it must be in JSX only.
I've tried everything I can think of the make it work but can't get the animated SVG to align over the top of the static SVG to create the spinning effect.
function StyledProgress({ message }) {
return (
<div className="progress-backdrop">
<svg
style={{ position: "absolute" }}
width="48px"
height="48px"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid"
>
<circle
cx="50"
cy="50"
fill="none"
stroke="#bdbdbd"
stroke-width="8"
r="36"
stroke-dasharray="169.64600329384882 58.548667764616276"
></circle>
</svg>
<svg
style={{ position: "relative" }}
width="48px"
height="48px"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid"
>
<animateTransform
attributeName="transform"
type="rotate"
repeatCount="indefinite"
dur="0.9900990099009901s"
values="0 50 50;360 50 50"
keyTimes="0;1"
></animateTransform>
</svg>
<span className="progress-text">{message ? message : "Loading"}</span>
</div>
);
}
What I'm aiming to replicate in JSX:
Stackblitz - MUI Progress
What I've tried:
Stackblitz - my HTML/CSS attempt
Reference article:
https://fjorgedigital.com/insights/blog/can-svg-animations-use-less-cpu/

How do I use boot-strap and jQuery to toggle between two icons without buttons?

I want it so that when a user clicks on the heart icon, the heart-icon is hidden and the heart-filled-icon is shown. How do I refer to the other icon within my jQuery function to change it's "display" from "none" to "shown"? I know that this example is really wrong this is just an idea of what I want to do and I can't figure it out.
$('.heart-icon').click(function(){
$('.heart-icon').hide();
$('.heart-filled-icon').show();
});
<svg width="1em" height="1em" viewBox="0 0 16 16" class="heart-icon bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<svg width="1em" height="1em" style ="display:none;" viewBox="0 0 16 16" class="heart-filled-icon bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg>

There are many different ways you can do this...
One way is to toggle the Bootstrap display classes. Put either d-none or d-block on the SVG's classes initially.
$('.bi').click(function(){
$('.bi').toggleClass('d-none d-block');
})
https://codeply.com/p/FmVXaxOvoA

css selector for shadow-root(closed), python 3

I want to extract next page url from the following html using css selector for scrapy spider.
<button id="omni-next-click" name="searchnextclick" class="btn btn__blue btn__rounded" aria-label="next" data-reactid="971" omnivalue="1">
<span class="icon icon__arrow-right" data-reactid="972">
<svg aria-hidden="true" data-reactid="973">
<use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__arrow-right" data-reactid="974">
#shadow-root (closed)
<svg id="icon__arrow-right" viewBox="0 0 32 32">
<title>icon__arrow-right</title>
<path d="M13.312 21.952c-0.144 0-0.288-0.064-0.4-0.176-0.224-0.224-0.224-0.592 0-0.816l4.976-4.976-4.976-4.96c-0.224-0.224-0.224-0.592 0-0.816s0.592-0.224 0.816 0l5.376 5.376c0.224 0.224 0.224 0.592 0 0.816l-5.376 5.376c-0.128 0.112-0.272 0.176-0.416 0.176z">
</path>
</svg>
</use>
</svg>
</span>
</button>
I am new to scraping. Please help me through it. How can I find css so that I can crawl through all the available pages?

Fixing SVG Fragment Sprite Slow Loading in Edge (Fine in Chrome, FF, Safari)

We have recently switched to SVG for our decorative images and logos. We do this in the form of a single SVG file containing multiple SVG sections for each image. We hide all SVG sections and only display the target SVG.
Here is a shortened example of our SVG file:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.img { display: none }
.img:target { display: inline }
.socialicon {fill:white}
.btt {fill:#919191}
</style>
</defs>
<svg viewBox="0 0 16 16">
<g id="icon-facebook" class="img socialicon">
<path d="M9.5 3h2.5v-3h-2.5c-1.93 0-3.5 1.57-3.5 3.5v1.5h-2v3h2v8h3v-8h2.5l0.5-3h-3v-1.5c0-0.271 0.229-0.5 0.5-0.5z"></path>
</g>
</svg>
<svg viewBox="0 0 16 16">
<g id="icon-google-plus" class="img socialicon">
<path d="M5.091 7.147v1.747h2.888c-0.116 0.75-0.872 2.197-2.888 2.197-1.737 0-3.156-1.441-3.156-3.216s1.419-3.216 3.156-3.216c0.991 0 1.65 0.422 2.028 0.784l1.381-1.331c-0.888-0.828-2.037-1.331-3.409-1.331-2.816 0.003-5.091 2.278-5.091 5.094s2.275 5.091 5.091 5.091c2.937 0 4.888-2.066 4.888-4.975 0-0.334-0.037-0.591-0.081-0.844h-4.806z"></path>
<path d="M16 7h-1.5v-1.5h-1.5v1.5h-1.5v1.5h1.5v1.5h1.5v-1.5h1.5z"></path>
</g>
</svg>
<svg viewBox="0 0 16 16">
<g id="icon-twitter" class="img socialicon">
<path d="M16 3.538c-0.588 0.263-1.222 0.438-1.884 0.516 0.678-0.406 1.197-1.050 1.444-1.816-0.634 0.375-1.338 0.65-2.084 0.797-0.6-0.638-1.453-1.034-2.397-1.034-1.813 0-3.281 1.469-3.281 3.281 0 0.256 0.028 0.506 0.084 0.747-2.728-0.138-5.147-1.444-6.766-3.431-0.281 0.484-0.444 1.050-0.444 1.65 0 1.138 0.578 2.144 1.459 2.731-0.538-0.016-1.044-0.166-1.488-0.409 0 0.013 0 0.028 0 0.041 0 1.591 1.131 2.919 2.634 3.219-0.275 0.075-0.566 0.116-0.866 0.116-0.212 0-0.416-0.022-0.619-0.059 0.419 1.303 1.631 2.253 3.066 2.281-1.125 0.881-2.538 1.406-4.078 1.406-0.266 0-0.525-0.016-0.784-0.047 1.456 0.934 3.181 1.475 5.034 1.475 6.037 0 9.341-5.003 9.341-9.341 0-0.144-0.003-0.284-0.009-0.425 0.641-0.459 1.197-1.038 1.637-1.697z"></path>
</g>
</svg>
</svg>
Here is an example of how we reference the SVG images:
<img
alt="Facebook"
id="facebookhome"
class="iconso"
src="/images/svg/svgsprite-1.6.svg#icon-facebook"
>
This works just great in Chrome, Firefox, Opera and Safari. Every new page load has an instant display of the images.
However, in IE11 and Edge, every time the page is loaded it's as if the SVG images are loaded last and it leaves the placeholder empty until everything else is loaded first (it seems). It's only a very short delay (0.5-1s) however not very nice for UX and slightly offputting.
Any ideas on what's causing this?
Any suggestions, tips, and advice are greatly appreciated.
We are also running HTTP2 so maybe SVG sprites won't perform any better anyway?

What effect does the base-tag have on svg:s with xlink:href?

I'm including svg:s in my markup using xlink:href:
<svg class="questionTitleIcon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-questionmark"></use>
</svg>
#icon-questionmark is defined
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-questionmark" viewBox="0 0 60 61" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><!-- Generator: Sketch 3.4.1 (15681) - http://www.bohemiancoding.com/sketch --><title>Slice 1</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="icon-invoicing-1" sketch:type="MSLayerGroup"><path d="M59.9827338,30.6427143 C59.9827338,14.2078571 46.5638849,0.884857143 30.0107914,0.884857143 C13.4581295,0.884857143 0.0392805755,14.2078571 0.0392805755,30.6427143 C0.0392805755,47.0775714 13.4581295,60.4005714 30.0107914,60.4005714 C46.5638849,60.4005714 59.9827338,47.0775714 59.9827338,30.6427143" id="Fill-1" fill="#FFBB2F" sketch:type="MSShapeGroup"></path><path d="M32.7333898,38.383 C33.4633898,39.1 33.8283898,40.003 33.8283898,41.091 C33.8283898,42.18 33.4633898,43.082 32.7333898,43.799 C32.0023898,44.516 31.0933898,44.874 30.0053898,44.874 C28.9163898,44.874 28.0203898,44.516 27.3173898,43.799 C26.6143898,43.082 26.2623898,42.18 26.2623898,41.091 C26.2623898,40.003 26.6143898,39.1 27.3173898,38.383 C28.0203898,37.667 28.9163898,37.308 30.0053898,37.308 C31.0933898,37.308 32.0023898,37.667 32.7333898,38.383 Z" id="Path" stroke="#6C4B00" stroke-width="2" sketch:type="MSShapeGroup"></path><path d="M22.0223898,23.022 C22.0223898,23.022 22.4993898,19.883 24.0523898,18.329 C25.6053898,16.777 27.7353898,16 30.4433898,16 C31.7433898,16 32.9053898,16.193 33.9273898,16.577 C34.9493898,16.963 35.8193898,17.507 36.5353898,18.21 C37.2523898,18.914 37.7963898,19.743 38.1683898,20.699 C38.5393898,21.654 38.7253898,22.69 38.7253898,23.805 C38.7253898,24.601 38.6393898,25.298 38.4663898,25.895 C38.2943898,26.492 38.0623898,27.037 37.7703898,27.528 C37.4773898,28.019 37.1463898,28.464 36.7743898,28.862 L36.4023898,29.26 C35.9503898,29.676 35.2333898,30.297 34.8093898,30.641 C34.8093898,30.641 34.8093898,30.641 34.4653898,30.932 C34.1193898,31.225 33.8083898,31.53 33.5293898,31.848 C33.2503898,32.167 33.1113901,32.3135647 32.8723898,32.884 C32.6333895,33.4544353 32.6333898,34.305 32.6333898,34.437 C32.6333898,34.568 31.7333898,34.675 30.6333898,34.675 L29.0583898,34.675 C27.9583898,34.675 27.0583898,34.326 27.0583898,33.899 C27.0583898,33.472 27.1773898,31.749 27.4173898,31.151 C27.6563898,30.554 27.9603898,30.017 28.3323898,29.539 C28.7043898,29.061 29.1153898,28.623 29.5673898,28.225 L30.0183898,27.826 C30.5143898,27.432 31.4163898,26.701 32.0223898,26.201 C32.0223898,26.201 32.0223898,26.201 32.4743898,25.736 C32.9253898,25.272 33.1513898,24.734 33.1513898,24.123 C33.1513898,23.433 32.9323898,22.836 32.4943898,22.331 C32.0553898,21.827 31.3323898,21.575 30.3233898,21.575 C29.3143898,21.575 28.5323898,21.867 27.9743898,22.451 C27.7887231,22.6456667 27.9743896,22.4510002 27.4173899,23.2842646 C26.8603902,24.1175289 26.2383898,24.999 25.1383898,24.999 L23.7223898,24.999 C22.6223898,24.999 21.8573898,24.109 22.0223898,23.022 Z" id="Path" stroke="#6C4B00" stroke-width="2" sketch:type="MSShapeGroup"></path></g></g></symbol>
</svg>
This works fine in Chrome.
In firefox, on any other url than "/", if I have a base-tag in my header, the items are not found, here is an example of the base-tag
Why is this and what can be done about it?

As Kaiido said, if you have to use a <base> element, then you will need to change all your xlink:href and url(#foo) references to absolute URLs. For example:
xlink:href="/path/to/my.svg#icon-questionmark"