Using Bubble templates: performance and debugging

Understanding Bubble Templates and Performance Issues

If you're thinking of purchasing a Bubble template, you may want to watch this video first. This video features one of our free 15-minute Bubble Coaching sessions, available to all our members at PlanetNoCode.com. In this session, we work to debug performance issues the member is encountering with a Bubble template they've purchased. We weigh up the benefits of using a template and potential performance issues caused by a bloated one-page app.

Debugging Performance Issues

Okay, so you're wanting to display certain groups when you click on elements, yeah? Correct, yeah, exactly. What do you have set up at the moment? So right now we have this repeating group here with this record. And when I go into the workflow, I don't know if it is this one. Let me try that. Right here, this group here. That home repeating group. That's probably nested in the top there. I think it is this one. It's going to be the next level up. Yeah, here, okay.

Workflow and Custom States

So when I click on a property, I have it set to scroll to the top of the page. It sets the index to property and then it actually pulls in. I created this custom state property active, which is the current cell's property. And then it animates to show the property information page that I showed you earlier.

Troubleshooting Loading Issues

Okay. Now, at the moment, I'm actually just running into some problems with it. It's just not working. So if I go to previews. So now when I click on it, nothing happens. Nothing is happening. But it might just be loading very slowly. Yeah. Just refresh it. I think you might have two workflow actions off your button click that might be one of the we can check that in a moment. Just something I noticed might be the case from looking at your workflows. But let's see what happens when it's happening on the front end.

Using the Bubble Debugger

Yeah. So I'm clicking on it now and everything else is working like these menu items, the components, they will work. But yeah, natural click on the thing is not is not working. Okay. Can you go back into the editor and give on the design builder, you select the right group and then click on start edit workflow. Just let me watch what happens again when you do that. Okay. And you've got some conditional ones to the right of it. Okay. In the in the front end, can we see what happens in the preview? If you turn on the debugger for Bubble might just be just for you in the in the editor's click preview and it will load in the debugger on that page.

Analyzing Template Performance

Yeah, so just click this. Yeah. But you probably disabled because it will be Oh, I know it's not loading in. I saw it load in. Do you have a bargain installed that the say was to the bugger because it might be a bit frustrating with the check. Because it's always going to sit at the bottom of the screen. So in order for mobile navigation to work, you might disable this somehow. Let me see if I come out of the on solids. No, I don't know. Can you try hitting the preview button in the editor again? You'll see that the debugger loads in as a query string. There we go. Yeah.

Identifying Performance Bottlenecks

Okay, so if you click on step by step for me, please and then and then let's click on the or is it still trying to load in the page? It's just loading. Okay, while it's loading, can we see what the one error is? It might be that it's just telling you that there's a lot going on. Okay, no, it's just a dark theme. The text I can find. You can probably know that. And then if I click on this. Yeah, they might not do anything while this is still loading something right at the start. Can we refresh it? Just click next. And again. Just keep going. Yeah, yeah. Click again.

Assessing Template Complexity

I mean, there's certainly a lot going on when the page loads in. Is all of that present in the template that you purchased or is it stuff you've added in? No, I've pretty much only just added design stuff. So I don't think there's a whole lot extra, extra happening there. So it's set out. Okay, because it just gets stuck at this point. Well, because what I'm looking for is to see whether there are any recurring workflows like run every five seconds, just, which it doesn't seem to be. Just to try and work out what's making it go so slow. Like you do have a lot of elements on the page. I mean, that's the nature of building a one page app. You get the benefit of the changes in the pages. You can animate them. It's a lot quicker, but it's a lot to load into start.

Exploring Alternative Solutions

Can you click on? Just see if that clears it. Okay. Can we try reloading the page and just seeing if we can get the Bubble loading bar at the top to go all the way across? Yeah. Let's see if it, I'm just going to wait for it to hit then and see if I can change anything. Okay. Yeah, that is quite peculiar because having watched the workflows go through the pages through that, you know, that's do with the, you're like the splash screen, but that's all cleared. Yeah. Yeah, it seems to be something. I don't want to rule out my, it seems to be pretty good. So I think it's something that's probably come along with the template. It's really blowing things down.

Investigating App Logs

Can we have a look? If you go into the Bubble editor and then settings. Sorry, logs, logs is what I meant. Just interested to see. Okay. Real time workflows actually said they were paid plans. Okay. It looks like it's loaded actually. Oh no. Sorry. We can dream. In my experience, the creep of the loading bar, if it's really slow like this, it can mean that it's detached from what's actually going on. Like it doesn't, I think maybe bubbles coded it so that it continues to move even if nothing's happening and it's moving so slowly. I doubt that it's going to complete itself.

Optimizing App Performance

Okay. Yeah, but it's the actual other elements that I, that should still work on our work at the moment. There's no other stuff. Okay. So actually, can we try something? If you change in the URL, you've got a mode to fault. I have a feeling that it's struggling to run the debugger because that's a like a CPU intensive, server intensive. Yeah. There you go. So I'd say that that's because there was a lot going on when the page loads because I think the debug is quite a critical tool. It would really help in this situation. But if it can't load both, I think there's just a lot going on.

Considering App Streamlining

Would your advice be to purge or try to purge things from the here that I just will never use just to try and bring things more streamlined? Like there's probably like I've kind of left all these views as they are just because I never knew if I would need them or not, if I want to reference them, but I could probably look through these and get rid of a good number of them that I'm probably never going to go for. Just that of interest, can you click on one of the views that you've not used and we'll just see if it's loading in on with the page. And then if you click on layout in the inspector panel, the gray panel on the right hand side. Okay, no, it isn't loaded on the page.

Examining Console Logs

Is it worth taking a look at the console and seeing something here? Yeah, I'd say the place to look is the debugger console. We can't load it in, right? No. I'm not sure. I think it's a slim chance the performance issue is with your browser. Although you can't really max out the RAM quite easily with Bubble. I think that it is a Bubble is there under things with just the amount of computing power that it's required to just open it on the spot.

Recommending a Fresh Start

Okay, if you want my opinion, if I was in your shoes, I would say what you like about this template and if what you do is a lot simpler, start from scratch and then you Bubble app. Yeah, and just build the light. If you if this template gives you enough of a like a Bubble education to understand how to get the navigation in with floating groups, custom states for transitioning between pages. I'd be tempted to build a less bloated version of it. Right.

Copying Elements and Workflows

And if I go down that road, how simple is it to kind of copy and paste elements and workflows from one app into the new one? So if you go into the Bubble editor, I'll show you the different ways you can do that. So your regular keyboard copy and paste your browser copy and paste that works fine with elements. But if you want to copy workflows, then you have to use the Bubble edit menu having selected an element. So edit. Right. Yeah, I was going to show I was thinking of a different way. So if you if you like go into the design panel and show me a button or something that's clickable. Yeah, so let's say I wanted to do the home and I wanted to bring across maybe this thing here. Yeah. So you've got a copy with workflows menu. And then in the new app, you can do a paste with workflows.

Building from Scratch vs Using Templates

But you might find that doesn't really save you that much time because you're running you have different databases, different custom states. Personally, if I was in your shoes, I would see it as an opportunity to build something from scratch. That's just what I need rather than something that's bloated. Also, I by building it myself, I know how everything works. So I've got a better hand on being able to develop it and push it further in the future. Yes, yes. But I will take the principles of this app, the floating groups of navigation. You seem to have got a good understanding of custom states. That's all going to be really helpful in building your own one page app.

UI Design Confidence

Okay. All right. Okay. I think that's good advice. Yeah, I think I think that you raise a couple of good points there, which is that, yeah, longer term, whilst it might be slower to build the first version, it's gonna, I guess, set me up for a much better understanding of how everything is tying together for future development. So yeah, I think that's wise. A wise point. Yeah. How confident are you with UI design and just making a page look good? Reasonably confident. It's a little bit easier than it used to be. But I remember I tried to use it a while ago and it was a lot, it was a little hard to get everything lined up. But this template has a lot of good formatting things, like how to get it to be in the dark mode and stuff like this. So it's good to go back and reference this template here as a reference to see how they've set it up. And then I can just try and copy it.

UI Design Resources

Okay. And it's because again, if I was in your shoes, I'd be looking, I'd say I'm someone who knows if something looks good, but can't start from a blank canvas themselves. Yeah. So I would, I will use sites like UI8.net or theme forest, and you can buy a template or like a UI kit off there, open it in Figma and build it up in Bubble. That's my work way. Okay. And the name of that was icon. The really good one is UI8.net. Between 20 and $50, there's some really nice web app and like mobile app UI kits on there.

Importing UI Designs into Bubble

Oh, that's really good. And when I run into a similar, I guess I would not run into the similar issue with having a lot of bloated stuff in there because they're just purely elements. Yeah. It's most of them are in Figma, which if you're not familiar with it, it's basically like a Photoshop, but UI design. So you're not importing their file into Bubble. You are using their file as a reference, but these are my font sizes, topography, padding, all of that. Right. Okay. And then you just translate that across into Bubble. Yes. And again, my personal preference is to build it manually because then I just, I know what's going on. Right. Okay. So there's no importing of those elements into Bubble from Figma. It's purely just copying it step by step.

Conclusion and Next Steps

There is an automated process, but then you are likely to end up with a lot of the bloat so like the Figma design may have many more nested groups than you actually require to achieve the same design in Bubble. Yeah. Okay. No, that makes no sense. Cool. I've got some videos on those topics, so I can send those across to you and make you curious. Yeah, that's absolutely perfect. Yeah. Because I think that, yeah, I think I'm definitely going to take your advice, which is to strip a lot of this stuff out by starting again. And yeah, if I can get a jumpstart with some good, some good elements that I don't need to have to start from scratch with. Because I think I have the similar thing issue, which is, yeah, I know when it looks good and I know when it feels right, but yeah, blank canvas is scary. So yeah, I will for sure follow this.

Final Thoughts on One-Page Apps

Just I think we've got one final thing to add to that is like, you're right. A one page app does offer the best experience on mobile because it performs much more closely to an actual app rather than a web app. But yeah, it's even more important for it to be lean because you're having to load in all your screens at one time. So I think you will get further by building it from scratch and just having what you need. And I'm guessing from what you're saying there, things like on the appearance channel, I think a lot of them, they have like load up on screen load. I'm saying load too many times in a second. Yeah, but like, sorry, on the layout. Yeah, it's like most of them are like visible on page load. I guess this feature here becomes very important to basically have nothing loading that isn't essential at the same time.

Optimizing Page Load

Not quite. You can approach that in its like cascading nested nature. So as long as the top parent isn't visible on page load, you don't need to uncheck that for all of its children. You could just do it on top level. So as long as in this like very top level, as long as this is not loading on page load, then all its children will be fine. Yes, yeah, you'd be creating far too much work for yourself to check the children unless you need the parents to load in without the children. Yeah, yeah, that makes sense. That makes sense. And then this all really helps to resolve a lot of that bloatedness as well for loading stuff that is not necessary. Yeah. Makes sense.

Wrapping Up the Session

Cool. Well, I think that that's our time. Yeah, sorry, it's not been such a promising session, but I'll send you some pointers in an email. Just just what I would do if I was in your shoes. Yeah, no, I mean, whilst it wasn't the exact topic that we originally wanted to discuss, I think you've given me some really wise insights into how I should approach it. So I appreciate that nonetheless. I think it's just valuable actually.