Slow app (image uploading + Link Preview API), Responsiveness issues (not a common use case)

Hi, guys! I am creating an analog of linktr.ee. This app helps to share several links with your Instagram followers by inserting a link of your linktr.ee profile in your Instagram’s BIO (it is one of the use cases). I’ve developed the first version of my app and faced some problems that I am struggling to solve. Here is my app:

It contains 5 pages (without sign up/login):
(if something is unclear about floating groups then read below the 3rd problem)

  1. edit_profile (it looks like iPhone on desktop. Both floating group relative to “TOP”)
  2. edit_link_page (it looks like iPhone on desktop. Both floating group relative to “TOP”)
  3. edit_social (it looks like iPhone on desktop. App’s floating group relative to “BOTH”. Menu relative to “BOTTOM”)
  4. profile
  5. link
    Editor: Nexttdraft | Bubble Editor

My problems:
Here is a quick screencast to understand problems better: https://youtu.be/u_-_koP9h10

  1. Image uploading is VERY slow. Sometimes user can’t upload an image and gets an error popup(that is a rare use case. Error popup is Bubble’s functionality)
  2. I used the Link Preview plugin by @romanmg. It helps me to auto-populate the link’s image. It also works slow and does not work in 50% of the cases.
  3. My app needs to look like an iPhone on the desktop.

    I achieved this by using 2 floating groups. The first for the app and the second for the downside menu. In some cases, It is not scrollable on mobile (for example on iPhone 11 PRO).
    It is worth saying that “edit_profile” and “profile” contain Vertical Scrolling RG that is important to mention because is affects responsiveness. I’ve also written a threat about the problem with RG, I was suggested to use the “Full list” RG instead of “vertical scrolling”, but I’ve not understood how to use the “Full list” RG and remain iPhone on desktop.
    Repeating group responsiveness

I will appreciate any help. If you know the solution to at least 1 problem, then feel free to post it here in this threat. Thank you in advance.

:blush:I hope I can help you out a little bit here and give you some ideas. Here are my, first look, suggestions:

  1. I notice you are using a file uploader. Try using a Picture Uploader instead and make sure you check “Limit image size before upload” which should speed up your uploading images. Images will upload 100x faster. See image:

  2. I just set up an example of a Link Preview on my end and it’s lightning fast. Check out how I have it set up. The parent group has the Get Preview’s data once and then the elements inside the group just reference the parent groups Get Preview’s (Link Preview) information. This way it doesn’t try to run the API multiple times, it just does it once. Very quick. See GIF:

Image

  1. Try making the repeating groups as ‘Full List’ instead of a vertical scrolling list. That might help the page scroll better. So to make this better on the Desktop version… First, make sure the floating group is farther down the page. Then use a group as a spacer to collapse the extra space if need be at the bottom of the screen. But if you make the whole page taller it will allow the floating group to actually sit on the bottom of the page instead of 2 inches above the bottom of the screen on my laptop. I have a video about one-page apps, but it’s on my members only portal (which is a monthly subscription).

That should fix all of the issues and you should be good to go. I tested everything already.

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
1 Like

Thank you very much, @J805!

I would love also to ask the next things:

  1. Should I use Picture Uploader if I plan to create video-uploading feature in the future?
  2. Can you see the image auto-population when you use the owler.com link? (that is one of those links that do not auto-populate for me. The majority of links do not auto-populate)
  3. What should I do if when I use floating group as a background with “relative to TOP” or “relative to BOTH” then the page is not scrollable at all on the majority of mobile phones?

This topic was automatically closed after 70 days. New replies are no longer allowed.