We Keep Coding

how do you get a pre-loader html code to work in reactjs App?

Below is the html code:
<div id="loader" class="show">
<div class="loader"></div>
</div>
It is pasted in the index.html default js component of a react app (web app) and the problem is that app just loads and loads, it never reveals the contents of the page.

I guess you removed the div with id="root" because react render component inside that div. So the solution is you can place it inside id="root" div in your index.html file and it will show on loading and disappear whenever your first react component renders.
<div id="root">
<div id="loader" class="show">
<div class="loader"></div>
</div>
<div>

Prevent Vue.Js replace Twig content in mounting DOM element

Version: Vue 3.0.5
index.html.twig
<div id="app">
<div class="text-center">
<h3>My text rendered in Twig</h3>
<div class="jumbotron text-center">
<example></example>
</div>
</div>
</div>
</div>
entry-file.js
import { createApp } from 'vue';
import Example from './components/Example.vue'
createApp(Example).mount('#app');
components/Example.vue
<template>
<div>
<p>This is text from VueJs component</p>
</div>
</template>
<script>
export default {
name: 'example'
}
</script>
Currently, when I access the page Vue completely removes Twig content inside #app div and replaces it with text from the component.
My question are,
How can I keep initial #app content rendered by Twig and additionally compile <example></example> component by Vue?
Is it OK practice to mix it this way? The problem is that I already have blocks/widgets and custom logic based on backed variables in Twig and it will be far too long to rewrite everything in Vue

Aura root component not handling the application event started from its child (Lightning Component)

Aura application event is firing successfully but it seems that the handler component is failing to listen or handle it and it does not call the action method openFeed. This is the component that handle the application event.
<aura:component controller="ConnectApiCallsController">
<aura:attribute name="yourfeed" type="PortalFeedWrapper[]" access="public"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:DraggableNavEvent" action="{!c.openFeed}" />
<aura:handler event="aura:doneRendering" action="{!c.doneRendering}" /> // not working if removing this line
<div>
<div class="feedWrapper slds-scrollable" >
<div class="tab">
<c:HorizontalDraggableNav/>
</div>
<div id="yourFeedTab" class="tabcontent">
<c:YourFeedWrapper feeds="{!v.yourfeed}"/>
</div>
<div id="discussionsByTopicsTab" class="tabcontent">
<c:DiscussionsByTopicsWrapper />
</div>
<!-- PrivateFeeds By THiru-->
<div id="privateFeedTab" class="tabcontent">
<c:PrivateFeedWrapper isUserInternal="{!v.isInternalUser}"/>
</div>
</div>
</div>
</aura:component>
When I remove doneRendering from the component than the openFeed is being called just fine, but the thing is why does doneRendering needs to be there for it to work? I dont have any doneRendering method declared on the controller. What am I doing wrong that doneRendering needs to stay there in order for it to work? Also that this is the parent component while the component that fires the application event is is c:HorizontalDraggableNav by using the following code:
var appEvent = $A.get("e.c:DraggableNavEvent");
appEvent.setParams({ feedType: e.target.id });
appEvent.fire();
and the component looks as below:
<aura:component>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler name="render" value="{!this}" action="{!c.onRender}" />
<aura:attribute name="isLoginUserInternal" type="Boolean" default="false" /> <!-- PrivateFeeds By Thiru-->
<aura:registerEvent name="appEvent" type="c:DraggableNavEvent" />
<div class="grid-container">
<div class="grid-item main">
<div class="items" id="items">
<div class="item" id="yourFeed">Your feed</div>
<div class="item" id="discussionsByTopics">Discussions by topics</div>
<!-- PrivateFeeds By Thiru-->
<aura:if isTrue="{!v.isLoginUserInternal}">
<div class="item" id="privateFeed">Valmet internal</div>
</aura:if>
</div>
</div>
</div>
</aura:component>
Any idea or solution on this problem?

This might be because you're using the aura:doneRendering event.
That event has been deprecated and the documentation says using it may impact other events.
Unless your component is running in complete isolation in a standalone app and not included in complex apps, such as Lightning Experience or the Salesforce mobile app, the container app may trigger your event handler multiple times. This behavior makes it difficult to handle each event appropriately.

changing only one part of the template with angular 2 routing

I have a template wit three sections one is the top navigation followed by left navigation and the content section which is the right div or element
<nav>top navs goes here </nav>
<div class="container>
<div class="row">
<div class="col-md-3" id="left-nav">
left navs goes here
</div>
<div class="col-md-9" id="content">
<!--Content goes here-->
<router-outlet></router-outlet>
</div>
</div>
The problem i am having right now is the <router-outlet></router-outlet> which is supposed to replace the HTM inside the div with an id of content doesn't do so. instead it grabs all the HTML of the same template and place it inside <div class="col-md-9" id="content">Content goes here</div>. Why duplicate the same template is this the normal behavior or there is something wrong with my implementation?

If you are changing just one part of your page one router-outlet is enough.
On the place that router-outlet is, component is injected. What component is injected is defined by your routing configuration.
Also change:
<div class="col-md-9"> id="content">
to
<div class="col-md-9" id="content">

Adding interceptor disables directives

I have an angular app with the content of the body containing a directive called layout as shown below.
<body>
<div layout></div>
</body
The layout directive contains other directives and is shown below
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- begin #page-container -->
<div id="page-container" class="fade in page-sidebar-fixed page-header-fixed">
<div header-directive ng-show="1==0"></div>
<div leftnav-directive ng-show="1==0"></div>
<div data-ng-view="">
</div>
<div footer-directive ng-show="1==0"></div>
</div>
I am writing an interceptor for authentication to secure the app. The following line makes the page not load
angular
.module('myapp')
.config(function ($httpProvider) {
$httpProvider.interceptors.push('authInterceptorService'); // if i comment this line out it works
});
If I move the content of the layout directive into the index.html the page loads fine.
<body>
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- begin #page-container -->
<div id="page-container" class="fade in page-sidebar-fixed page-header-fixed">
<div header-directive ng-show="1==0"></div>
<div leftnav-directive ng-show="1==0"></div>
<div data-ng-view="">
</div>
<div footer-directive ng-show="1==0"></div>
</div>
</body
The reason I am using the directives so I can hide/show the top nav and side nav menus and instead show the login screen (template). SO I can check in the directive code to see if the user is logged in and if they are I would show the other directives.
This is the interceptor that I am using
Any idea if what is going on and how can I resolve it?
Thanks.
EDIT:
I created a plunker but I cannot seem to make it work. It does not recognize the module helo created in app.js. Please check it here