Load a circular loading widget on api call in modal view

[satyam yadav]

So , i am working on a app , in which there are many screens and many rest api call on every screen for example while logging in, sign up , then after login while loading the pages  inside the app , So when i built the app in android through google colab and used it in android , i found out that when my internet connection is slow the page shows nothing and seems like it is hanged but the then it gets transferred to other screen because the response get received for the  request   , but what i want to do is that to load a circular spinning widget while the api request is in  progress and i read about some article and UrlRequest in kivy , then i got to know about the (on_progress) function, but I am totally unaware about how to load the modal view which has a spinning widget. I am not able to produce any code example hear  because i dont have any api call for which i could show my doubt but i think i have described thoroughly.

Thank you community

[Elliot Garbus]

What can you say about the api you are loading data from, is it downloading a significant amount of data, or is it just slow to respond?

The on_progress callback is for downloading a large amount of data and providing a callback for a defined block size.  This would be suitable for advancing a progress bar while downloading an image or an mp3.

 

If the issue is simply that there is a long latency site, that is the site takes a long time to respond to a  request, you could open a Modalview at the time you make the request, and close it when the response is received.

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/203aeb75-5d1a-4ce6-8e1d-37d59ae6b721n%40googlegroups.com.

 

[satyam yadav]

I am using rest apis for firebase user authentication and reading and writing data in cloud firestore , so there's really not much data to download but some json which is neglible because its just the response, so for the period of api call  i want the modal view to load a spinning widget but i have no idea how to load it , so any code snippet which on pressing a button opens a modal view for the time being while api call is on progress will be helpfull in developing my app as it will give app the better user experience as it looks like it got hanges.

[satyam yadav]

yes my app class MDApp

[Robert]

There are two separate issues here

1) "seems like hanging" , this is due to not making the REST calls inside a Thread or UrlRequest; or using a Thread with join() or similar. If this is not done the Kivy event loop will hang.

2) displaying a visual indication.

For me generally REST calls are pretty fast, the worst seems to be 'signup' and that is perhaps a second (I'm 4k miles from the server). Data amounts are usually tiny, its about network or server latency rather than bandwidth.

[Elliot Garbus]

The code below, puts an MDSpinner on a ModalView during the download.  You can put any complete url on the textinput line.  It is defaulting to a free site that does not require a key and was slow enough to show the effect.

 

 

from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.network.urlrequest import UrlRequest
from kivy.uix.modalview import ModalView

KV = '''
<SpinnerPopup>:
    size_hint: None, None
    size: 200, 200
    BoxLayout:
        orientation: 'vertical'
        AnchorLayout:
            MDSpinner:
                size_hint: None, None
                size: 100, 100
        Label:
            text: 'Please wait...'
            size_hint_y: None
            height: 30

BoxLayout:
    orientation: 'vertical'

    TextInput:
        id: url
        hint_text: "URL: "
        size_hint_y: None
        height: 30
        multiline: False
        text: 'https://dog.ceo/api/breeds/image/random'  

    AnchorLayout:
        BoxLayout:
            size_hint: None, None
            size: 100, 100
            id: box

    Button:
        size_hint_y: None
        height: 48
        text: "Download"
        on_press: app.download()
'''


class SpinnerPopup(ModalView):
    pass


class NetworkSpinnerApp(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.modal = None

    def build(self):
        return Builder.load_string(KV)

    def download(self):
        self.modal = SpinnerPopup()
        self.modal.open()
        url = self.root.ids.url.text
        print(f'URL: {url}')
        UrlRequest(url, on_success=self.got_response, on_error=self.fail, on_failure=self.fail)

    def got_response(self, req, r):
        print(f'got response, {req.is_finished=}')
        print(f'result: {r}')
        self.modal.dismiss()

    def fail(self, req, r):
        print(req.is_finished)
        print(r)
        print('fail')


NetworkSpinnerApp().run()

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/c51b281b-df50-4bc2-a858-cbc721412304n%40googlegroups.com.

 

[satyam yadav]

Yes Robert , i am using Urlrequest method mentioned in the kivy documentation , i just wanted to show a visual indication that api request is in process please wait, which Elliot showed me through a code snippet and i am really thankful to him. But your thoughts on this will lead to healthy discussion ,how things should proceed.