I have an ionic App which was working fine but now It is showing little weird behaviour, When I run the app it does not show the data at first but when I click on side menu once or twice then it loads and shows the data. I have an nodejs api from which the data comes to my app and the same api has been put in aws api gateway, I noticed this behaviour since I implemented aws sdk for binding data in my APP.
What can be the root cause for the same?
I can share the code but I am not sure where the issue is whether in controllers or views?
I solved it using Ionic Loader as the reponse was taking long time. My side menu was not getting initialized with the same time as other views hence views were not rendering without sidemenu being rendered, The idea is to show a loader on every response and hide it when it's a success, so it will render the views successfully.
Hope it helps.
Related
Hi if I have our same reactjs screen opened on two separate browser windows, how do make sure they are always in sync (i.e., changes on one will reflect on the other)? It seems that redux does not help here?
I am creating a mern stack application and ı have problems as shown in the pictures
Here is what shows when ı press ctrl + U in chrome
Here is what shows in dev tools
My app is still in development mode and is this affects seo ? and how can ı render in source code what shows in dev tools ?
Thanks
it's happening because the jsx we write are actually closer to js than html,
after we ship the code the we send the js and only the root div.
as the js executes in browser the div gets populated.
now it has effects on SEO,
you won't get any preview of your website if you share it on any social media if you go with raw react.
if it's a blog, or some documentation page I would suggest you look up static generation or server-side rendering and go with nextjs or gatsbyjs.
That happens because a ReactJS is rendered using JS. It means that the DOM will be updated using JS. When you open it with ctrl + U you're looking only to the HTML document, without any changes made by the JS engine.
I don't think leaving it like this will affect SEO, but you you can use server-side rendering to achieve what you want.
I am trying to integrate my app into kik, but for a specific action I fall in an error page that says:
Oops, couldn't load. Please try again later.
This panel looks like a kik panel with my app logo at the top
But everything is OK, If I try my app in Chrome with Kik plugin it works well. In fact my app creates an iframe and load it then we use postMessage to communicate between parent and iframe. I put some logs and it seems that everything is OK. Iframe is loaded and send message to parent with postmessage. But when I am in kik, the 'couldn't load' message appears and stops my app.
Does someone know what cause this panel to appear?
I had the exact same problem.
The problem is the combination of loading an iframe after doing browser history manipulation. Since there is no back button in Kik you can just do the page updates without updating the browser history and this will solve your problem.
I use this line to detect Kik and, if detected, ignore browser history updates:
if (!kik.enabled) {
//We are not running in Kik so we can do browser history manipulation here
}
Websites in the Kik browser must be single-page applications. The error screen shows up when the website either fails to load or tries to navigate elsewhere.
Is your website doing any navigation? Also, is there a place where we could take a look at the code?
What's the best practice of loading data at launching Chrome App?
The landing page of my Chrome App is dependent on some configuration data, which I've stored in the chrome local storage. However, reading chrome local storage is an asynchronous process. Hence, after the App has launched, there is a period of time when the landing page doesn't show correctly.
To avoid this blank time (due to the asynchronous process of reading local storage), I'm thinking about reading data at background JS. However, I haven't googled out what's the best practice to do it.
Anybody has any comments? Thanks.
just listen to the onLaunched event
chrome.app.runtime.onLaunched.addListener(function() {
// load your data
});
Here's one piece of helpful suggestion I've got from the Google Group. Share here so that someone with the same problem might refer to it:
You can read from chrome.storage in the background page and open the window when the data is ready. However, the user experience might be even worse, because instead of the incorrect landing page, you have no user feedback at all.
The usual (and easy to implement) solution is to show your landing page with some visual feedback during data loading, like a spinning wheel with a "Loading" label. If you UI really requires the data to show up, you can add this visual indicator as an opaque div on top of the whole window.
Some people use splash screens, but I don't think it adds to the user experience.
I have a Silverlight App which gets its data from a database. My Silverlight app (running in the browser) retrieves the data through a web service. Pretty standard setup.
But there is some data which has to be there all the time or the App is in an invalid state - think data to fill drop downs etc. So I need this data to be "pre-loaded" into the App before it's sent down to the client so that it's never in an invalid state. Today I load this data via a web service call when my first page is initialized which can some times take a few seconds - during that time my App is in an invalid state.
Is there a way to populate data (from a backend database) in my Silverlight App before it's sent to the browser?
It is valid for an app to start and not be ready to use for a while, so long as the user cannot interact with it (or see the broken bits:))
Better to ensure your app has a splash screen/login page etc that displays until such time as the required resources are loaded. Once loaded you can set an app state to then show the main screen.
I had the same problem with a website that loaded the menu items via a service (as the text was data driven). Wound up running a progress spinner over the top (with a full-screen background).
I don't think you can. The application runtime occurs on the client's machine. I would suggest putting up a loading dialog while you bring those items down from the database.
What HiTech Magic said. Best practice for this is to use a splash screen or login page. You can also have your buttons (and interaction) disabled by default, and after the data is loaded, enable the UI. I would go with the spash screen though..