<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="55366" data-post-id="55366">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="peerreynders" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/peerreynders/120/5826_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  peerreynders
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="shortlyportly" data-post="3" data-topic="9527">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/shortlyportly/48/12742_2.png" class="avatar"> shortlyportly:</div>
<blockquote>
<p>I don’t want to include my script in app.html.eex for all pages as it is rather large and only required for a few pages (for reference it is a graph library and I only have a few pages with graphs - the majority don’t require them).</p>
</blockquote>
</aside>
<p>Sounds to me like you need different bundles for different pages. While the brunch configuration is typically in <code>brunch-config.js</code> it also supports</p>
<pre data-code-wrap="bash"><code class="lang-bash">-c, --config [path]    specify a path to Brunch config file
</code></pre>
<p>So you could simply have a separate configuration for each separate bundle and move the script tag for the bundle from the “layout” to the “page” so that each page references the actual bundle that it needs.</p>
<p>Now other tools can support multiple bundles per configuration - for example <a href="https://rollupjs.org/#using-config-files" rel="noopener nofollow ugc">rollup’s configuration file</a> can be a single configuration object or an <a href="https://github.com/rollup/rollup/pull/1389" rel="noopener nofollow ugc">array of configuration objects</a>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="55366" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/javascript-on-a-single-or-several-pages-only/9527/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-55366" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="55366"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="78301" data-post-id="78301">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hoangvn2404" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hoangvn2404/120/9411_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hoangvn2404
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I got the same problem with managing javascript for specific page, I come up with a solution, please checkout my blog post<br>
<a href="https://medium.com/@hoang_nguyen/organize-and-serve-page-specific-javascript-in-phoenix-with-webpack-47a24d169c03" class="onebox" target="_blank" rel="noopener nofollow ugc">https://medium.com/@hoang_nguyen/organize-and-serve-page-specific-javascript-in-phoenix-with-webpack-47a24d169c03</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="78301" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/javascript-on-a-single-or-several-pages-only/9527/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-78301" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="78301"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="123613" data-post-id="123613">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Kurisu" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Kurisu/120/14820_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Kurisu
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group quote-modified" data-username="hoangvn2404" data-post="13" data-topic="9527">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hoangvn2404/48/9411_2.png" class="avatar"> hoangvn2404:</div>
<blockquote>
<p>I got the same problem with managing javascript for specific page, I come up with a solution, please checkout my blog post</p>
<p><img src="https://forum.elixirforum.com/uploads/default/original/2X/8/8c7390150cd0078e967a18c7663581b9b334d239.png" alt="" width="32" height="32" role="presentation"> <a href="https://medium.com/@hoang_nguyen/organize-and-serve-page-specific-javascript-in-phoenix-with-webpack-47a24d169c03" rel="noopener nofollow ugc">Medium – 15 Apr 18 </a></p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/2X/0/02108d65dbb63307e7c7bf49d0dc000878900d46.png" data-download-href="https://forum.elixirforum.com/uploads/default/02108d65dbb63307e7c7bf49d0dc000878900d46" title="" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/2X/0/02108d65dbb63307e7c7bf49d0dc000878900d46_2_690x226.png" alt="" role="presentation" width="690" height="226" srcset="https://forum.elixirforum.com/uploads/default/optimized/2X/0/02108d65dbb63307e7c7bf49d0dc000878900d46_2_690x226.png, https://forum.elixirforum.com/uploads/default/optimized/2X/0/02108d65dbb63307e7c7bf49d0dc000878900d46_2_1035x339.png 1.5x, https://forum.elixirforum.com/uploads/default/original/2X/0/02108d65dbb63307e7c7bf49d0dc000878900d46.png 2x" data-dominant-color="111415"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename"></span><span class="informations">1200×394 96.1 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<h3><a href="https://medium.com/@hoang_nguyen/organize-and-serve-page-specific-javascript-in-phoenix-with-webpack-47a24d169c03" rel="noopener nofollow ugc">Organize and serve page specific javascript in Phoenix with Webpack</a></h3>
<p>Problem</p>
</blockquote>
</aside>
<p><a class="mention" href="/u/hoangvn2404" rel="nofollow">@hoangvn2404</a> or anyone that can help me…</p>
<p>I’m trying to make this work but I would like to have the <code>index.ts</code> script that loads specif js file, in <code>javascript es6</code> instead of <code>typescript</code>. I never used typescript before.</p>
<p>Is it to possible to rewrite this <code>ts</code> code in <code>es6</code> ?</p>
<p>Thanks.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="123613" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/javascript-on-a-single-or-several-pages-only/9527/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-123613" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="123613"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="123614" data-post-id="123614">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Kurisu" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Kurisu/120/14820_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Kurisu
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group quote-modified" data-username="GregFreeman" data-post="4" data-topic="9527">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/g/b2d939/48.png" class="avatar"> GregFreeman:</div>
<blockquote>
<blockquote>
<p>Shared common JavaScript between views</p>
</blockquote>
<blockquote>
<p>Before continuing let’s first think about what our good old web application is going to need. There’s probably going to be some common js functionality shared across the whole application, like handling pulldown menus in the header, initialazing third party plugins, etc. Having this in mind we can create our first js module that will be in charge of all this common functionality that needs to be executed on every page:</p>
</blockquote>
<blockquote>
<p>// web/static/js/views/main.js</p>
</blockquote>
<blockquote>
<p>export default class MainView {<br>
mount() {<br>
// This will be executed when the document loads…<br>
console.log(‘MainView mounted’);<br>
}</p>
</blockquote>
<blockquote>
<p>unmount() {<br>
// This will be executed when the document unloads…<br>
console.log(‘MainView unmounted’);<br>
}<br>
}<br>
The MainView module will basically have to main functions:</p>
</blockquote>
<blockquote>
<p>mount which will be called every time the page loads and will contain all the initializing of common functionality needed.<br>
umount which can be used to add any functionality needed to be executed when the document unloads. This might be useful in some situations like showing a confirm alert to the user when he tries to leave an edit view with unsaved changes, for example.<br>
Now let’s update the main app.js file so it uses the new MainView module:</p>
</blockquote>
<blockquote>
<p>// web/static/js/app.js</p>
</blockquote>
<blockquote>
<p>import ‘phoenix_html’;<br>
import MainView from ‘./views/main’;</p>
</blockquote>
<blockquote>
<p>function handleDOMContentLoaded() {<br>
const view = new MainView();<br>
view.mount();</p>
</blockquote>
<blockquote>
<p>window.currentView = view;<br>
}</p>
</blockquote>
<blockquote>
<p>function handleDocumentUnload() {<br>
window.currentView.unmount();<br>
}</p>
</blockquote>
<blockquote>
<p>window.addEventListener(‘DOMContentLoaded’, handleDOMContentLoaded, false);<br>
window.addEventListener(‘unload’, handleDocumentUnload, false);</p>
</blockquote>
<p>Note I’m not quoting the entire article.<br>
After the MainView is working, you can add a View to every individual subpage that loads page-specific javascript.<br>
This has been my practice for my past few Phoenix apps.</p>
</blockquote>
</aside>
<aside class="quote no-group" data-username="amnu3387" data-post="6" data-topic="9527" data-full="true">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/a/ed8c4c/48.png" class="avatar"> amnu3387:</div>
<blockquote>
<p>I was going to post this as I also have been using it but then I noticed someone commented that the app.js still gets the contents of those files concatenated - and I just checked and indeed it seems so - which (kinda…) partially defeats the purpose. If somebody knows how to handle the compilation of js in brunch in order to exclude certain files from the concatenated app.js but still have them be accessible as imports would be great ^</p>
</blockquote>
</aside>
<p>Well, so since brunch is replaced now by webpack in <code>Phoenix 1.4</code>, I wonder if that does not solve the problem. I will try it again.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="123614" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/javascript-on-a-single-or-several-pages-only/9527/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-123614" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="123614"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="123678" data-post-id="123678">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="OvermindDL1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/OvermindDL1/120/2677_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  OvermindDL1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="Kurisu" data-post="14" data-topic="9527">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kurisu/48/14820_2.png" class="avatar"> Kurisu:</div>
<blockquote>
<p>Is it to possible to rewrite this <code>ts</code> code in <code>es6</code> ?</p>
</blockquote>
</aside>
<p>Typescript is basically just javascript with types.  You can run it through babal to strip the type tags automatically while still checking, or you can just remove the type tags as after that then you are left with just bog standard normal javascript.  <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
<p>Really though, if you have to do javascript then I’d recommend using typescript on top of it, it’s taken over and it is always better to have your types checked.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="123678" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/javascript-on-a-single-or-several-pages-only/9527/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-123678" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="123678"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="123694" data-post-id="123694">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="amnu3387" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  amnu3387
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Latelly I’ve been using nuxt on all of my front-ends as a separate “app” and phoenix as an api for it, nuxt kinda works out of the box in terms of chunking your assets as long as you use <code>imports</code> in your JS with their webpack config and the routes are also separated automatically.</p>
<p>If you want to create bundles of files I think you need to tell webpack specifically what are your entry points, how to chunk and then import/async load the js files (and CSS files if you also want them bundled). I haven’t done that in some time but I think you can find examples easily. I just googled and found this <a href="https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312" rel="noopener nofollow ugc">https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312</a> for react, it seems to cover most of what you would need even if not using react.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="123694" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/javascript-on-a-single-or-several-pages-only/9527/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-123694" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="123694"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="284616" data-post-id="284616">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="volart" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/volart/120/30240_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  volart
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey Folks! I have faced the same issue as the original one on this topic. It seems many things have changed since then, I use Phoenix v1.7.2 and all advice here is not suitable.</p>
<p>Does anyone know how to make js files template specific? Like for admin template we will use admin.js, for  home template it is home.js and so on so forth.</p>
<p>Also afaiu last version of Phoenix doesn’t use webpack and /priv/static/assets is being built by something else, is it possible to not create a single app.js there but a bunch of js-files?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="284616" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/javascript-on-a-single-or-several-pages-only/9527/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-284616" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="284616"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="284617" data-post-id="284617">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="greven" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/greven/120/25004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  greven
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Check this topic, I gave an answer there.</p><aside class="quote" data-post="1" data-topic="54900">
  <div class="title">
    <div class="quote-controls"></div>
    <img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/alessandro/48/30087_2.png" class="avatar">
    <div class="quote-title__text-content">
      <a href="https://forum.elixirforum.com/t/add-page-specific-js-files-on-phoenix-1-7/54900" rel="nofollow">Add page-specific js files on Phoenix 1.7</a> <a class="badge-category__wrapper " href="/c/questions-help/questions/53" rel="nofollow"><span data-category-id="53" style="--category-badge-color: #C14BFB; --category-badge-text-color: #000000; --parent-category-badge-color: #C14BFB;" data-parent-category-id="171" data-drop-close="true" class="badge-category --style-square --has-parent" title="Elixir Questions / Help"><span class="badge-category__name">Questions</span></span></a>
    </div>
  </div>
  <blockquote>
    Hey, 
I’m trying to have some javascript to only load on a certain pages; specifically I’m trying to load code that operates with stripe.js bindings only on a page with Stripe Checkout information, rather than loading the js file everywhere. 
I’ve found some old tutorials from the olden days when Phoenix had views, but with the new organisational model from 1.7 I can’t seem to crack it. 
NB: this is not liveview specific. 
Does anyone have some blueprint I can follow to get this done?
  </blockquote>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="284617" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/javascript-on-a-single-or-several-pages-only/9527/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-284617" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="284617"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>